您的位置:首页 > 其它

在IE6、ie7下input选择框与文字对齐 和ie更高版本无法一致的解决办法

2012-01-17 13:12 621 查看
今天遇到了一个CSS问题,就是我的代码里面Input竟然与文字无法对齐

<input id="logobck" type="checkbox">
<span>自动登录</span>


就是这样的一个写法,要么是IE7对不齐,要不就是高版本对不齐。后来我想用!important来解决,后来发现IE9貌似已经能够辨析这个了。

在解决的问题过程中,我发现在IE7下面和更高版本占用的宽高是不一致的,但是眼睛看过去,明明选择框一样的大小啊,我反复确认并把input的margin、padding都设置为了0,可还是这样。

经过仔细观察,我惊讶的发现一个事实,就是IE7下面input checkbox占用的宽高为20px,而其它版本只有13px

知道就好办了,限定Input的宽和高就可以了。

然后用 (行高 - input高)/2-1 的公式写了一个margin-top,解决了无法对齐的问题

2012-08-02备注:其实对input进行左浮动能更好的解决无法对齐的问题

2013-6-1补充:

实际上有更好的方式来解决这个问题,比如旁边的字体为12px,那么可以给input添加样式

input{
height: 13px;
line-height: 13px;
vertical-align:middle;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: