input文字垂直居中和按钮对齐问题,兼容IE8
1、盒子模型问题:请CSS重置
2、按钮不对齐:请浮动或者vertical-align:middle;然后计算宽高,使其对齐 ;
3、IE8文本不居中:line-height属性 注意:IE8不支持font写法(或者某个样式不支持)
IE浏览器测试到IE8,IE5、6、7慎用。
问题原因:盒子模型
1、盒子模型:
在页面放2个input,一个text文本框,一个button按钮(设置宽高,无任何其他样式)
input[type='text']{width:400px;height:45px;}
input[type='button']{width:45px;height:45px;}
观察:IE8:文本框border:1px;padding:2px;
按钮border:3px;padding:1px 8px;
火狐:文本框border:1px;padding:2px;
按钮border:3px;padding:0px 8px;
谷歌:文本框border:2px;padding:1px 0px;
按钮border:2px;padding:1px 6px;
添加样式,让border,padding一样
input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;}
input[type='button']{width:45px;height:45px;border:1px solid red;padding:0;}
观察:
IE8:文本框border:1px;content:202x47 (IE的盒子模型)
按钮border:1px;content:45x45 (IE的盒子模型)
火狐:文本框border:1px;content:200x45
按钮border:1px;content:43x43
谷歌:文本框border:1px;content:200x45
按钮border:1px;content:43x43
2、按钮对齐方法:浮动(原因是Offset不同没有搜索更多的知识,可以自己补充这方面的知识);
input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}
input[type='button']{width:45px;height:45px;border:1px solid red;padding:0;float:left;}
参考第2步,自行计算宽高,使其对齐(有的可能没有border,用的背景色代替,请设置border:0;高度自行调整)
input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}
input[type='button']{width:47px;height:47px;border:1px solid red;padding:0;float:left;}
3、IE8文本居中:line-height 注意 IE8不支持font写法
将font:normal 18px "微软雅黑";换成font-size:18px;font-style:normal;font-family:"微软雅黑"!
或者(这样可以用font:normal 18px "微软雅黑";写法,但是有点不是在正中间)
input[type='text']{width:400px;height:25px;padding:10px 0px;border:1px solid red;float:left;}
input[type='button']{width:47px;height:47px;line-height: 47px;border:1px solid red;padding:0;float:left;}
input文字垂直居中和按钮对齐问题,兼容IE8的更多相关文章
- css将两个元素水平对齐,兼容IE8
css实现元素水平对齐 css实现水平对齐,如图 有人会说css实现这种水平对齐要兼容ie8还不简单吗?使用float: left,或者display: inline-block,不就可以了吗?是的, ...
- [CSS]Input标签与图片按钮对齐
页面直接摆放一个input文本框与ImageButton图片按钮,但是发现没有对齐: <input type="text" id="txtQty" /&g ...
- iOS-Button图片和文字垂直居中【按钮图片和文字同时居中】
以前不怎么有这样的需求,最近开发经常用到,所以就干脆封装一个这样的 Button 让图片和字体都垂直居中,重写layoutSubviews方法,来实现就可以,至于 layoutSubviews 方法什 ...
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
- 多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】
首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...
- 纯CSS实现多行文字垂直居中几种方法解析
场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...
- 用CSS如何实现单行图片与文字垂直居中
图片样式为 以下为引用的内容:.style img{vertical-align:middle;.....} 如果STYLE中有其它如INPUT或其它内联元素可写成 以下为引用的内容:.style i ...
- select中文字垂直居中解决办法
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select. 我对sel ...
随机推荐
- Android之系统Action大全
String ADD_SHORTCUT_ACTION 动作:在系统中添加一个快捷方式.. “android.intent.action.ADD_SHORTCUT” String ALL_APPS_AC ...
- POJ 1146
#include <iostream> #include <algorithm> #define MAXN 55 using namespace std; char _m[MA ...
- 各种”xxx“ native gem required installed build tools 报错
报错情况:(类似毛病 提示native gem require installed builld tools的解决方法是一样的)) 解决方法:http://rubyinstaller.org/down ...
- UBUNTU下MONGODB出现PHP Fatal error: Uncaught exception 'MongoConnectionException' with message 和 Authentication failed on database 'admin' with username
MONGO 远程连接服务器,出现: PHP Fatal error: Uncaught exception Stack trace:# /var/www/data/update_data.php(): ...
- centos7-windows10 双系统安装
win10默认, 然后压缩出来一个卷安装win7: http://www.techweb.com.cn/network/system/2016-12-21/2456741.shtml http://b ...
- Pascal的3种注释
1.单行注释 {大括号里的内容都被注释掉} 2.单行注释2 //这种注释几乎是绝大部分语言中通用的了 3.多行注释 (*pascal的多行注释有点奇怪,使用的是:括号+星号的方式*) 其他 ...
- NoSQL数据库--简介
一.What's NoSQL? NoSQL,全称是”Not Only Sql”,指的是非关系型的数据库.这类数据库主要有这些特点:非关系型的.分布式的.开源的.水平可扩展的.原始的目的是为了大规模we ...
- Linux的用户(组),权限,文件精妙的三角关系,和强大的帮助系统
在linux中一切都是文件(文件夹和硬件外设是特殊的文件),如果有可能尽量使用文本文件.文本文件是人和机器能理解的文件,也成为人和机器进行 交流的最好途径.由于所有的配置文件都是文本,所以你只需要一个 ...
- python hive.py
#!/usr/bin/env python# -- coding:utf-8 -- import osimport sysfrom subprocess import call from pyspar ...
- mariadb(mysql)从库relaylog损坏无法同步的处理方法
故障说明 晚上备用服务器自动重启,收到报警,备用服务器上的mariadb从库无法去同步主库.启动mariadb后,报如下错误(重点看红色字体) mariadb_1 | -- :: [Note] Pl ...