在IE6、ie7下input选择框与文字对齐 和ie更高版本无法一致的解决办法
2012-01-17 13:12
621 查看
今天遇到了一个CSS问题,就是我的代码里面Input竟然与文字无法对齐
就是这样的一个写法,要么是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 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; }
相关文章推荐
- IE6 IE7下文字显示竖排的解决办法
- IE6 IE7下ol li无法显示list-style-type解决办法
- IE6-IE9兼容性问题列表及解决办法_补充之五:在IE9下, disabled的文本框内容被选中后,其他控件无法获得焦点问题
- IE6、IE7下样式overflow:hidden失效的解决办法
- flash player for ie无法安装,提示版本过低解决办法
- input文本框、文字、按钮、图片 垂直居中对齐的解决办法
- IE9无法输入文字、鼠标滚轮失效等问题之解决办法
- input文本框、文字、按钮、图片 垂直居中对齐的解决办法
- input的背景会随着文字移动,在ie6下面的解决办法
- ie6下li内图片和文字不居中对齐的解决办法
- 表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐)
- 在IE6、IE7下文字与input表单居中显示方法
- 解决Windows 7下IE11无法卸载、无法重新安装,提示安装了更新的IE版本
- input文本框、文字、按钮、图片 垂直居中对齐的解决办法
- 签名后无法安装,提示“该应用版本与您手机中的版本签名不一致”解决办法
- IE7下,input元素相对父级元素错位解决办法
- 自己做IE各个版本兼容的时候用的解决办法方法,IE6到IE11都可以【亲测】
- Windows 7下VS2008无法调试2.0.50727.4952版本mscorlib.dll的解决办法
- 解决Windows 7下IE11无法卸载、无法重新安装,提示安装了更新的IE版本