天天看點

IE6/IE7下position:absolute;絕對定位偏移、不顯示問題(轉文)

以下文章轉自網易 幸福鐮刀 的博文

      今天做項目,因為在一個子產品裡有幾十張的圖檔顯示,原想用table布局可能會比較友善,沒想到出現的問題竟讓我一整天痛不欲生。最後我痛下一決定,以後堅決不能用table來布局,哪怕隻是一小塊子產品, table它是表格也隻能是表格。

現在來說一下定位問題,問題的緣由本來是想再圖檔上加一表現層,用來介紹圖檔的基本資訊,效果如下:

  (此處有圖顯示不出來,應該是我們想要的正常顯示了)

Firefox、IE8

現在我們再來看看,IE6跟IE7這兩輛老爺車的表現:

IE6/IE7下position:absolute;絕對定位偏移、不顯示問題(轉文)

其實這個原因是因為IE6/IE7的解析是在position:absolute之後,仍然會按照普通文檔流的解析來進行,而要打破這種方式,讓它正常工作就需要給它一個定位,具體代碼如下:

方法一:

  CSS:  

IE6/IE7下position:absolute;絕對定位偏移、不顯示問題(轉文)

html代碼:

IE6/IE7下position:absolute;絕對定位偏移、不顯示問題(轉文)

切記 left:0px;必須兩個都要寫,少寫一個都會造成不顯示:

IE6/IE7下position:absolute;絕對定位偏移、不顯示問題(轉文)
IE6/IE7下position:absolute;絕對定位偏移、不顯示問題(轉文)

     方法二:

IE6/IE7下position:absolute;絕對定位偏移、不顯示問題(轉文)

小結:

這是我個人遇到問題的一些總結,方法肯定不隻我寫的這兩種,具體可以百度一下,說不定可以找到更多。以上兩種,我更傾向于第一種方法來解決。在HTML中添加一些無意義的空标簽是不太可靠的做法,會影響代碼品質,除非找不到更好的解決BUG的辦法,否則盡量不要使用。

轉載于:https://www.cnblogs.com/60-by/p/5341780.html