input文字垂直居中和按钮对齐问题，兼容IE8

Posted 2020-09-22 魔兽IT男

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;}