Fork me on GitHub

父元素padding后,子元素absolute定位偏差解决办法

假设一div已经设置 position:relative及padding:30px,然后要在里面放置一position:absolute的元素,并设置它left:0;top:0——这种效果可用来实现左头像右内容的布局。

在Firefox等标准浏览器下,绝对定位的元素此时真的是左0上0,顶着父div的边,但IE下却是左30上30,只因为父div设置了padding为30。

这个问题很要命,那么解决办法呢?

只要为父div加上zoom:1,触发其hasLayout,即可在IE下实现和标准浏览器下一样的样式了。
此解决方案适合绝大部分情况。

每发现IE一个无厘头BUG,都会让我对IE的恨加深一层。兼容问题,’您’辛苦了…

据说帅的人都赏给博主几块钱零花钱。