ie6的padding属性hack

最新推荐文章于 2021-08-03 21:15:11 发布

转载最新推荐文章于 2021-08-03 21:15:11 发布 · 997 阅读

文章标签：

#ie #浏览器 #firefox #chrome

DOM 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在IE6浏览器中使用padding属性时遇到的问题，即padding值会双倍计算，导致布局错位。文章提供了通过使用!important关键字来解决这一问题的方法，并提及了在IE6中浮动元素的margin-left或margin-right同样存在类似问题。

在ie6下使用padding的话,数值乘2倍增长,其他浏览器不会!

只能用!important来调整!

例如在IE6下的x容器样式是这样。

.x{width:100px;height:100px;padding:50px;}

在IE7\8，firefox，chrome等主流浏览器中，它的总占据的宽度和高度是200X200，而在IE6中，则是300X300。

要调整兼容性，利用!important关键字！

样式写成

.x{width:100px;height:100px;padding:50px!important;padding:25px;}

除了IE6以外，其他浏览器都支持!important关键字属性的优先！

注意：要使用!important的话，把优先的属性写前面，就像上面一样！这样在代码读取顺序的时候，除IE6以外的浏览器读取到了!important关键字的属性，后面的相同属性就不再读取，而IE6不支持!important，所以IE6只能读取!important后的属性！

另外：在ie6下浮动了的容器里使用margin-left或right，数值也是乘2倍增长。

同学们以后做兼容性的时候注意，具体怎么做，参照上面的！