ie六、7 margin負值部分沒法看到的解決方法

ie六、7下，若元素設置margin值爲負值，則margin負值區域會有一部分會離奇的消失，沒法在頁面上看到(至關於父元素設置了overflow:hidden後，子元素超出父元素部分就會被砍掉的效果同樣)

問題重現代碼：

 

<style>
*{margin: 0;padding: 0;}
body{padding: 200px;}
</style>
<div style="width:200px;height:200px;background:#f00;"><div style="margin:0 -20px;background:#080;">帶margin負值的元素</div></div>

解決問題後的代碼：

<style>
*{margin: 0;padding: 0;}
body{padding: 200px;}
</style>
<div style="width:200px;height:200px;background:#f00;"><div style="margin:0 -20px;background:#080;*zoom:1;_position:relative;">帶margin負值的元素</div></div>

複製上面2段代碼，分別在ie六、7上運行，可看到「解決問題後的代碼」在頁面上的展現效果已同其它瀏覽器效果同樣了：帶margin負值的元素,負值部分能徹底顯示出來了！！

對比上面2段代碼，發現就只給帶margin值爲負值的元素加了「*zoom:1;_position:relative;」！

我的理解：加了zoom:1屬性觸發ie7的hasLayout屬性,ie7下margin負值可見，但ie6仍堅持隱藏負值部分，需添加position:relative,添加該屬性應該是提升了元素層級(z-index)，所以該子元素超出父元素部分就能再次重現了！

不少時候，爲解決ie6/7對帶margin負值的元素渲染錯誤致使的頁面顯示問題，咱們還須要在父元素中觸發layout，在父元素上加相似*zoom:1  這樣觸發layout的屬性！