Css在IE6瀏覽器裏的一些弊端和解決方法

此文出自:K.N.J的博客

 

有很多時候,如果使用的瀏覽器的版本不夠,會導致一些CSS屬性無法發揮出應有的作用,結合自己碰到和網上的一些情況,做了一些對會在IE6及更早瀏覽器裏出現的問題的歸類及解決方法。

1.浮動時產生雙倍邊距。

如果再IE6及更早的瀏覽器中出現浮動後margin的值表現出雙倍的情況,可以將此元素的display設置爲inline就可以了。

如:#text{display:inline}

2.定義小高度的容器

有時在IE6及更早瀏覽器中無法直接定義較小高度的容器,那是因爲都有默認的行高。這個時候要用到overflow這個屬性,並設置爲hidden纔可以。

如:#text{overflow:hidden;height:1px;font-size:0;line-height:0;}

3.模擬min-height效果

這個時候,我們不能再將#text中的overflow設置爲hidden了,否則min-height就沒有任何作用了。

正確的方法是:#text{min-height:120px;_height:120px;}

4.解決當li中出現2個或以上的浮動,li之間會產生空白間隙的問題

如何消除IE6或更早瀏覽器中li之間的間隙,可以使用top這個屬性值,也可以設置爲text-top|middle|bottom|text-bottom,甚至還可以設置<length><percentage>的值。

其中之一的例子是:li{vertical-align:top}

5.解決使用濾鏡PNG圖片透明後,容器內鏈接失效的問題。

要解決這個問題,就必須要問容器內的鏈接定義相對定位屬性position的值爲relative。

實例爲:div{width:200px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’*.png’);}

a{_position:relative}

............

...............

...................更多IE6中的bug及修補方法,請點擊:K.N.J's blog

 

更多關於html方面的資料,請參閱:K.N.J的博客

 

發佈了15 篇原創文章 · 獲贊 1 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章