本篇內(nèi)容介紹了“IE6下容器的寬度實(shí)例分析”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
創(chuàng)新互聯(lián)是一家專業(yè)提供雁塔企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、H5建站、小程序制作等業(yè)務(wù)。10年已為雁塔眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
div {
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
–>
問題的差別在于容器的整體寬度有沒有將邊框(border)的寬度算在其內(nèi),這里IE6解釋為200PX ,而FF則解釋為220PX,那究竟是怎么導(dǎo)致的問題呢?大家把容器頂部的xml去掉就會發(fā)現(xiàn)原來問題出在這,頂部的申明觸發(fā)了IE的qurks mode,關(guān)于qurks mode、standards mode的相關(guān)知識,請參考相關(guān)資料。
IE6,IE7,FF
IE7.0出來了,對CSS的支持又有新問題。瀏覽器多了,網(wǎng)Bpx; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意順序。
這樣也屬于CSS HACK,不過沒有上面這樣簡潔。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二種,是使用IE專用的條件注釋
第三種,css filter的辦法,以下為經(jīng)典從國外網(wǎng)站翻譯過來的。.
新建一個css樣式如下:
#item {
width: 200px;
height: 200px;
background: red;
}
新建一個div,并使用前面定義的css的樣式:
在body表現(xiàn)這里加入lang屬性,中文為zh:
現(xiàn)在對div元素再定義一個樣式:
*:lang(en) #item{
background:green !important;
}
這樣做是為了用!important覆蓋原來的css樣式,由于:lang選擇器ie7.0并不支持,所以對這句話不會有任何作用,于是也達(dá)到了 ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式:
#item:empty {
background: green !important
“IE6下容器的寬度實(shí)例分析”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!