IE6下容器的寬度實例分析

本篇內(nèi)容介紹了“IE6下容器的寬度實例分析”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)是一家專業(yè)提供雁塔企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、H5建站、小程序制作等業(yè)務。10年已為雁塔眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

<?xml version=”1.0&Prime; encoding=”gb2312&Prime;?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312&Prime; />

<style type=”text/css”>

<!&ndash;

div {

cursor:pointer;

width:200px;

height:200px;

border:10px solid red

}

&ndash;>

</style>

<div ōnclick=”alert(this.offsetWidth)”>讓FireFox與IE兼容＜/div>

問題的差別在于容器的整體寬度有沒有將邊框（border）的寬度算在其內(nèi),這里IE6解釋為200PX ,而FF則解釋為220PX,那究竟是怎么導致的問題呢？大家把容器頂部的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專用的條件注釋

<!&ndash;其他瀏覽器 &ndash;>

<link rel=”stylesheet” type=”text/css” href=”css.css” />

<!&ndash;[if IE 7]>

<!&ndash; 適合于IE7 &ndash;>

<link rel=”stylesheet” type=”text/css” href=”ie7.css” />

<![endif]&ndash;>

<!&ndash;[if lte IE 6]>

<!&ndash; 適合于IE6及一下 &ndash;>

<link rel=”stylesheet” type=”text/css” href=”ie.css” />

<![endif]&ndash;>

第三種，css filter的辦法，以下為經(jīng)典從國外網(wǎng)站翻譯過來的。.

新建一個css樣式如下：

#item {

width: 200px;

height: 200px;

background: red;

}

新建一個div,并使用前面定義的css的樣式：

<div id=”item”>some text here＜/div>

在body表現(xiàn)這里加入lang屬性,中文為zh：

<body lang=”en”>

現(xiàn)在對div元素再定義一個樣式：

*:lang(en) #item{

background:green !important;

}

這樣做是為了用!important覆蓋原來的css樣式,由于:lang選擇器ie7.0并不支持,所以對這句話不會有任何作用,于是也達到了 ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式：

#item:empty {

background: green !important

“IE6下容器的寬度實例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

本文名稱：IE6下容器的寬度實例分析
網(wǎng)頁URL：http://bm7419.com/article32/jdcjsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、自適應網(wǎng)站、面包屑導航、小程序開發(fā)、網(wǎng)站營銷、服務器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)