今天在寫前端遮罩層時碰到一個問題,使用絕對定位給圖片添加透明遮罩層時,遮罩層用width:100%,在IE6下不兼容,IE7+沒問題,因爲IE6下的這個100%不是針對父級容器,而是針對一個指定高度的祖先容器(高度不爲auto的容器)。
解決辦法是:給遮罩層父容器,即 position:relative; 的類名添加 overflow:hidden; 屬性。
給遮罩層添加高度大於其父容器的高度,比如圖片高度爲400px,就在 height:100%; 之後 添加 _height:410px;
這樣在IE6下就可以正常顯示,因爲超出的部分被隱藏起來。