IE6對於css屬性overflow的表現

overflow是針對內容超出容器的size時的表現方式,可設底下四種值:

visible(預設):內容完全顯示,不嵌入顯示區域
auto:內容嵌入顯示區域,並視情況顯示水平與垂直捲軸
scroll:內容嵌入顯示區域,水平捲軸會出現但視情況顯示可捲動或不可捲動
hidden:內容嵌入顯示區域,捲軸不會出現

*嵌入的意思是指內容的顯示範圍將限制在容器的大小之內。超過的部份可以是隱藏,或是讓容器出現捲軸。

IE6若要呈現內容嵌入的效果,容器必須明確設定width屬性,什麼單位都可以,例如px, %都可以,只要有設給容器就可以。若容器本身沒有明確設定width屬性,IE6會將所有內容顯示出來,包括容器寬度超過瀏覽器可視的寬度時也是一樣。

所以只要給容器設上width屬性就可以了嗎?偏偏如此做的時候,有些瀏覽器反而出現無法預期的狀況。目前自己想到的方式就是讓javascript來判斷是不是IE6,是的話就給加上width屬性,通常設成100%是最理想的,js語法是:

if(navigator.userAgent.match(‘MSIE 6.0′)){
document.getElementById(“main”).style.width=’100%’;
}

看來,好像慢慢習慣用js來補破網了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Proudly using Dynamic Headers by Nicasio WordPress Design