关于ie的3像素bug
2012-11-02 09:36
162 查看
以前写前端代码时,ie下总是会出现各种莫名其妙的问题,如一行两列布局在其他浏览器下正常,但是在ie下确发现两列出现了上下错位。今天将ie下的3像素问题做个总结,后续遇到问题再更新。
1、bug描述
ie下两个相邻的div之间会出现3个像素的bug,这个bug是在当对其中一个div使用了float,而另外一个没有使用时会出现。
left
right
上面的代码在ie6低下运行时,会发现right前面出现3px的空格。
解决方法:a.对另一个元素同时使用float; b.为已经浮动的div添加一条语句:margin-right:-3px; ;
当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现,它会偏移3像素。只要触发IE的hasLayout,非浮动元素就会拥有布局。所以,利用IE6特有的hack规则,为它单独写样式就可修复此问题:_zoom:1;margin-left: value;_margin-left: value-3px;zoom 是IE触发Layout条件之一,因为它是IE特有的CSS规则,所以采用zoom。margin-left: value-3px 是修复IE6 中3px 的bug。此前采用非浮动元素也浮动的方法修复bug,现在可以试试这个新的方法了!注:前面的下划线是专门写给IE7以下版本的hack!
1、bug描述
ie下两个相邻的div之间会出现3个像素的bug,这个bug是在当对其中一个div使用了float,而另外一个没有使用时会出现。
left
right
<div style="margin: 0 auto; background-color: #ccc;"> <div style="width: 200px; height: 100px; float: left; background-color: #95f49e;">left</div> <div style="background-color: #fff; height: 100px; border: 1px solid #ccc;">right</div> </div>
上面的代码在ie6低下运行时,会发现right前面出现3px的空格。
解决方法:a.对另一个元素同时使用float; b.为已经浮动的div添加一条语句:margin-right:-3px; ;
当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现,它会偏移3像素。只要触发IE的hasLayout,非浮动元素就会拥有布局。所以,利用IE6特有的hack规则,为它单独写样式就可修复此问题:_zoom:1;margin-left: value;_margin-left: value-3px;zoom 是IE触发Layout条件之一,因为它是IE特有的CSS规则,所以采用zoom。margin-left: value-3px 是修复IE6 中3px 的bug。此前采用非浮动元素也浮动的方法修复bug,现在可以试试这个新的方法了!注:前面的下划线是专门写给IE7以下版本的hack!
相关文章推荐
- 关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
- 藏在IE中的Bug:关于document.getElementById()方法
- 关于居中布局和IE双倍边距bug
- IE bug: 1像素的dotted/dashed边框
- IE里关于CSS的优先级的bug(三)
- jquery关于checkbox在ie下的一个bug
- 收集一些关于IE的BUG
- 关于在IE9下RequiredFieldValidator出现“无法获取属性“toLowerCase”的值: 对象为 null 或未定义”的Bug
- ie6/7下 li内浮动元素下边距4像素bug解决方案
- 关于a标签中图文链接在IE的一个BUG分析
- IE里关于CSS的优先级的bug(一)
- css2----兼容----ie67的3像素bug
- 关于jsTree 1.0-rc1在IE下自定义图标显示不正常的BUG的解决方法
- 关于IE下select标签的bug
- IE里关于CSS的优先级的bug(二)
- 关于居中布局和IE双倍边距bug
- 关于 ie getAttribute() 的实现bug
- 关于ie的盒子模型bug
- ie关于居中显示的bug
- 关于IEajaxpost请求无法获取数据的BUG