css兼容性案例：margin-top在IE6/7下失效

又到了利用碎片学习的时间了，看看这个兼容性的小案例，前端开发者经常遇到的问题:margin-top在IE6/7下失效。

一个块级元素，触发了hasLayout（比如设置了宽度高度），并且其前面紧挨着的同级的节点如果为absolute绝对定位，就会导致这个块级元素在IE6/IE7下面的margin-top失效，看起来就像margin-top:0一样。

正常浏览器：

在IE6/7下的效果：

原因是：序号那一栏被顶上去了，原因是“猜冠军”是绝对定位。

解决办法有以下：

1.使用padding来代替margin，比如设置其父元素的padding-top，或者设置这个块元素的padding-top，不过要注意padding对其背景的影响。（这个方法还是治标不治本）。

2.使这个块不直接跟在前面的这个绝对定位元素后面，比如在它们之间插入一个空div标签。

3.交换这两个标签的前后位置。

前端爱好者们约定，阅读后：

if（‘觉得有用’）

｛

分享给朋友（‘I get it！’）;

｝

else if（‘已了解’）

｛

分享给朋友（‘a piece of cake！’）;

｝

else if('看不懂')

{

回复小编（'help me!'）;

}