您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > ie6,ie7兼容性總結(jié)

ie6,ie7兼容性總結(jié)

文章來源：365jz.com 點(diǎn)擊數(shù)：4120 更新時(shí)間：2015-09-16 20:09 參與評(píng)論

其實(shí)瀏覽器的不兼容，我們往往是各個(gè)瀏覽器對(duì)于一些標(biāo)準(zhǔn)的定義不一致導(dǎo)致的，因此，我們可以進(jìn)行一些初始化，很多問題都很輕松解決。

下面是14條特殊情況僅供參考：

1. 文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實(shí)際占高16px，下留白3px，ff 下實(shí)際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設(shè)定 line-height 。確保所有文字都有默認(rèn)的 line-height 值。這點(diǎn)很重要，在高度上我們不能容忍1px 的差異。

2.ff下容器高度限定，即容器定義了height之后，容器邊框的外形就確定了，不會(huì)被內(nèi)容撐大，而ie下是會(huì)被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。

3.橫向上的撐破容器問題，。如果float 容器未定義寬度，ff下內(nèi)容會(huì)盡可能撐開容器寬度，ie下則會(huì)優(yōu)先考慮內(nèi)容折行。故，內(nèi)容可能撐破的浮動(dòng)容器需要定義width。

小實(shí)驗(yàn)：有興趣大家可以看看這段實(shí)驗(yàn)。在不同瀏覽器下分別測(cè)試以下各項(xiàng)代碼。

a.<div style=”border:1px solid red;height:10px”></div> b. <div style=”border:1px solid red;width:10px”></div>

c. <div style=”border:1px solid red;float:left”></div> d. <div style=”border:1px solid red;overflow:hidden”></div>

上面的代碼在不同瀏覽器中是不一樣的，實(shí)驗(yàn)起源于對(duì)小height 值div 的運(yùn)用，<div style=”height:10px;overflow:hidden”></div>，小height 值要配合overflow:hidden一起使用。實(shí)驗(yàn)好玩而已，想說明的是，瀏覽器對(duì)容器的邊界解釋是大不相同的，容器內(nèi)容的影響結(jié)果各不相同。

4.最被痛恨的，double-margin bug。ie6下給浮動(dòng)容器定義margin-left 或者margin-right 實(shí)際效果是數(shù)值的2倍。解決方案，給浮動(dòng)容器定義display:inline。

5.mirror margin bug，當(dāng)外層元素內(nèi)有float元素時(shí)，外層元素如定義margin-top:14px，將自動(dòng)生成margin-bottom:14px。 padding也會(huì)出現(xiàn)類似問題，都是ie6下的特產(chǎn)，該類bug 出現(xiàn)的情況較為復(fù)雜，遠(yuǎn)不只這一種出現(xiàn)條件，還沒系統(tǒng)整理。解決方案：外層元素設(shè)定border 或設(shè)定float。

引申：ff 和ie 下對(duì)容器的margin-bottom，padding-bottom的解釋有時(shí)不一致，似乎與之相關(guān)。

6. 吞吃現(xiàn)象。還是ie6，上下兩個(gè)div，上面的div設(shè)置背景，卻發(fā)現(xiàn)下面沒有設(shè)置背景的div 也有了背景，這就是吞吃現(xiàn)象。對(duì)應(yīng)上面的背景吞吃現(xiàn)象，還有滾動(dòng)下邊框缺失的現(xiàn)象。解決方案：使用zoom:1。這個(gè)zoom好象是專門為解決ie6 bug而生的。

7.注釋也能產(chǎn)生bug~~~“多出來的一只豬。”這是前人總結(jié)這個(gè)bug使用的文案，ie6的這個(gè)bug 下，大家會(huì)在頁面看到豬字出現(xiàn)兩遍，重復(fù)的內(nèi)容量因注釋的多少而變。解決方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法寫注釋。

8.img 下的留白，大家看這段代碼有啥問題：

<div>
<img src=”" mce_src=”" />
</div>

把div的border打開，你發(fā)現(xiàn)圖片底部不是緊貼著容器底部的，是img后面的空白字符造成，要消除必須這樣寫

<div>
<img src=”" mce_src=”" /></div>

后面兩個(gè)標(biāo)簽要緊挨著。ie7下這個(gè)bug 依然存在。解決方案：給img設(shè)定 display:block。

9. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是<img />這個(gè)inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以嘗試去調(diào)整img 和文字讓他們?cè)趇e和ff下能一致，你會(huì)發(fā)現(xiàn)怎么調(diào)都不會(huì)讓你滿意。索性讓img 和文字都 float起來，用margin 調(diào)整。

10.clear層應(yīng)該單獨(dú)使用。也許你為了節(jié)省代碼把clear屬性直接放到下面的一個(gè)內(nèi)容層，這樣有問題，不僅僅是ff和op下失去margin效果，ie下某些margin值也會(huì)失效
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>

11.ie 下overflow:hidden對(duì)其下的絕對(duì)層position:absolute或者相對(duì)層 position:relative無效。解決方案：給overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

12.ie6下嚴(yán)重的bug，float元素如沒定義寬度，內(nèi)部如有div定義了height或zoom:1，這個(gè)div就會(huì)占滿一整行，即使你給了寬度。float元素如果作為布局用或復(fù)雜的容器，都要給個(gè)寬度的。

13.ie6下的bug，絕對(duì)定位的div下包含相對(duì)定位的div，如果給內(nèi)層相對(duì)定位的div高度height具體值，內(nèi)層相對(duì)層將具有100%的width值，外層絕對(duì)層將被撐大。解決方案給內(nèi)層相對(duì)層float屬性。

14.width:100%這個(gè)東西在ie里用很方便，會(huì)向上逐層搜索width值，忽視浮動(dòng)層的影響，ff下搜索至浮動(dòng)層結(jié)束，如此，只能給中間的所有浮動(dòng)層加width:100%才行，累啊。opera這點(diǎn)倒學(xué)乖了跟了ie。

-----------------------------------------------------------------------------------------------------------------

ie的float bug(ie6,ie7)使前端工程師們?yōu)橹_,最常見的現(xiàn)象就是:當(dāng)浮動(dòng)元素的父級(jí)元素在拖動(dòng)滾動(dòng)條的時(shí)候出現(xiàn)邊框的缺失,對(duì)于此類問題的解決方案就是使浮動(dòng)元素獲得布局.

在諸多的情況中,因?yàn)轫撁嫘枰獙挾茸杂缮炜s而不能申明寬度為固定值,但我們可以設(shè)置*height:1%;,*在這里可謂是舉足輕重,因?yàn)?只能被ie7及以下版本解析,ie8并不識(shí)別此類寫法,所以可以使用這個(gè)寫法來區(qū)別ie8和其他版本號(hào)的ie瀏覽器.對(duì)網(wǎng)上流行的ie8 beta1的hack,也算是一個(gè)補(bǔ)充.

        一些常用的hack測(cè)試

        * html p {color:red;}          支持 IE6        不支持FF IE7 IE8b
        *+html p {color:red;}　　支持 IE7 IE8b        不支持FF IE6
        p {*color:red;}                      支持 IE7 IE6        不支持FF IE8b

IE8 中增加了 CSS3 中的子串匹配的屬性選擇器（substring matching attribute selectors），具體規(guī)則與正則中的匹配很相似：

        E[att^=’val’] //子串以’val’ 開始
        E[att$=’val’] //子串以’val’ 結(jié)束
        E[att*=’val’] //子串中包含’val’

        IE8 支持絕大多數(shù)基本的 CSS2.1 選擇器，不支持的包括但不限于：[:first-line] 、[:first-letter]。
        對(duì)于 CSS2.1 中的 generated content 部分，即通過使用偽元素 :before 和 :after 添加文本內(nèi)容，IE8 中支持并未完全。
        而對(duì)于幾乎在其他瀏覽器中都支持的 opacity 和 RGBA ，IE8 中依舊沒有支持。
        對(duì)于原來用來區(qū)分 IE 的 HACK 在 IE8 中基本失效（比如*property:value、*property:value等）。
        原有 IE 的 list-item whitespace bug 在 IE8 中依舊存在。
        原有 IE 的 z-index bug 在 IE8 中依舊存在。
        IE8 中產(chǎn)生新的 bug：當(dāng) line-heigth 小于正常值時(shí)，超出的部分將被裁切掉。
        IE8 中依然不支持 display:table 。
        IE8 中依然不支持 border 的 transparent 值。
        IE8 中 @import 只支持三層嵌套。
        IE8中 border的 transparent 不被支持
        IE8中產(chǎn)生新的BUG：line-heigth BUG
        /*/p{ color:#1e90ff}/*/　只針對(duì)IE8的hack，可以是屬性也可以是類

------------------------------------------------------------------------------------------

BUG描述：

頁面中某DIV使用了position:relative，結(jié)合top=-25px等元素定位。在FF和IE7下表現(xiàn)正常，但是在IE6中該DIV會(huì)隨鼠標(biāo)滾動(dòng)而滾動(dòng)。

分析：

這是IE6一個(gè)已知的BUG：當(dāng)某position:relative元素被帶有overflow:auto/scroll屬性的塊級(jí)元素包含時(shí)，會(huì)表現(xiàn)出postion:absolute的行為。

解決方法：

1.為包含塊元素添加屬性position:relative 。

2.把該元素的position:relative屬性去掉，使用默認(rèn)的static定位，并通過margin-top等屬性實(shí)現(xiàn)類似的效果。

————————————————————————————————————————————————————————————————

ie6的末日即將來臨,對(duì)我們前端開發(fā)人員來說,無疑是一個(gè)慰藉人心的喜訊.但這個(gè)末日也并非朝日可至,所以我們還是爭(zhēng)取最后的勝利,用各種hack和方法來規(guī)避ie6下雙邊距,背景透明,重復(fù)文字等等一堆bug.下面是轉(zhuǎn)載自前端觀察(譯自www.sitepoint.com)中的10個(gè)修復(fù)ie6下bug技巧:
1. 使用DOCTYPE
你應(yīng)該在一直每個(gè)HTML文件的頭部都使用DOCTYPE，并且我們推薦使用strict 版本，比如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者，對(duì)于XHTML使用:

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

你需要處理的最棘手的事情就是IE6進(jìn)入quirks模式——它已經(jīng)夠詭異了。
2. 設(shè)置position: relative
將一個(gè)元素設(shè)置為”position:relative”可以解決很多問題，特別是你曾經(jīng)遇到隱藏的或?qū)R詭異的盒子。顯然，你需要非常小心點(diǎn)兒，因?yàn)榻^對(duì)定位的子節(jié)點(diǎn)可能會(huì)因此重新定位。
3. 將浮動(dòng)元素設(shè)置為display:inline
具有margin屬性的浮動(dòng)元素可能引起著名的IE6雙倍margin問題，比如，你為一個(gè)元素指定margin-left為5px，但是IE6中實(shí)際上卻表現(xiàn)為10px。”display:inline”將解決這個(gè)問題，盡管這不是必須的，你的CSS仍然是有效的。
4. 將一個(gè)元素設(shè)置為hasLayout
很多IE6(和IE7)的渲染問題可以通過設(shè)置元素的hasLayout來解決。這是一個(gè)IE內(nèi)部屬性（IE隱藏的，更多關(guān)于haslayout的資料，可以參閱這里），用來確定相對(duì)于其他元素，內(nèi)容是如何布局和定位的。如果你需要設(shè)置一個(gè)inline元素(比如一個(gè)鏈接)為block元素，或者是應(yīng)用透明效果，設(shè)置hasLayout也可能是必須的。
最簡(jiǎn)單的設(shè)置hasLayout的方法是為CSS設(shè)置一個(gè)高度或?qū)挾龋▃oom也可以用，但是zoom并不是CSS標(biāo)準(zhǔn)的一部分）。我們推薦設(shè)置實(shí)際尺寸，但是問題是這是不現(xiàn)實(shí)的，你可能需要使用”height:1%”。如果父元素并沒有設(shè)置高度，該元素的實(shí)際高度并不受影響，而且這個(gè)時(shí)候hasLayout已經(jīng)被啟用。
5. 修正重復(fù)文字bug
復(fù)雜的布局可以觸發(fā)在浮動(dòng)元素的最后一些字符可能出現(xiàn)在出現(xiàn)在清除元素下面的bug。這里有幾個(gè)解決方法，有些是完美的，但是做一些反復(fù)試驗(yàn)也是必須的：
         .確保所有的元素使用”display:inline;”
         .在最后一個(gè)元素上使用一個(gè)”margin-right:-3px;”
         .為浮動(dòng)元素的最后一個(gè)條目使用一個(gè)條件注釋，比如：

.在容器的最后元素使用一個(gè)空的div(它也有必要設(shè)置寬度為90%或類似寬度。
>>>>>>你還可以訪問positioniseverything.net 查看該問題的完整介紹。
6. 在可點(diǎn)擊和懸停的元素上只使用<a>標(biāo)簽
IE6只認(rèn)識(shí)對(duì)a標(biāo)簽的CSS hover效果。
你也可以在基于JavaScript的組件內(nèi)使用他們來控制，以使他們保持鍵盤的可操作性。是有一些可替代的選擇，但是<a>標(biāo)簽比其它方案更可靠。
7. 使用!important 或高級(jí)選擇器來區(qū)分IE6
不使用傳統(tǒng)Hack或在額外文件中的條件CSS的方法，寫出特別針對(duì)IE6的可行的代碼也還是有可能的。比如最小高度可以通過這段代碼來定義：

#element {
     min-height: 20em;
     height: auto !important; /* 所有瀏覽器都理解這段代碼 */
     height: 20em; /* IE6 錯(cuò)誤的使用這個(gè)值 /*
}

IE6 不理解min-height并錯(cuò)誤的用20em覆蓋”auto”高度，但是，如果內(nèi)容需要更多的空間的話，它會(huì)自動(dòng)增加高度。
另外一個(gè)可選的方法是使用高級(jí)選擇器，比如e.g.

#element {
     min-height: 20em;
     height: 20em;
}
/* IE6 無視下面的代碼*/
#element[id] {
     height: auto;
}

8. 避免百分比單位
百分比會(huì)把IE搞糊涂的。除非你可以確切的控制每一個(gè)父元素的大小，才可能做到最佳預(yù)防。你可以通過!important在其他瀏覽器中繼續(xù)使用百分比，比如：

body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}

9. 盡早測(cè)試并不斷測(cè)試
不要等到你的網(wǎng)站或應(yīng)用完成了才測(cè)試IE6;這樣的話問題可能更糟糕，而且會(huì)花更多時(shí)間來修正。如果你的網(wǎng)站能夠在Firefox和IE6中正常運(yùn)行，那么一般在其它瀏覽器就不會(huì)有問題。
10. 重構(gòu)你的代碼
經(jīng)常發(fā)生的事情是，修正bug要比重新考慮一個(gè)布局問題要花更長(zhǎng)的時(shí)間。對(duì)HTML做些小改動(dòng)和一些簡(jiǎn)單的CSS常常更有效。這可能意味著你要放棄完美的代碼，但是會(huì)出現(xiàn)較少的長(zhǎng)期問題而且將來你會(huì)很清楚如果處理這些可能出現(xiàn)的問題。

-------------------------------------------------------------------------------------------------------

讓IE6支持PNG格式的圖片

用法：

        先復(fù)制下面的代碼在記事本中，然后另存為pngbehavior.htc（名字可以任意）：

<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>

/*
* PNG Behavior
*
* This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)
* for WebFX (http://webfx.eae.net)
* Copyright 2002-2004
*
* For usage see license at http://webfx.eae.net/license.html
*
* Version: 1.02
* Created: 2001-??-??    First working version
* Updated: 2002-03-28    Fixed issue when starting with a non png image and
*                      switching between non png images
*          2003-01-06    Fixed RegExp to correctly work with IE 5.0x
*          2004-05-09 When printing revert to original
*
*/

var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
                navigator.platform == "Win32";

var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;

if (supported) fixImage();

function propertyChanged() {
    if (!supported || isPrinting) return;

    var pName = event.propertyName;
    if (pName != "src") return;
    // if not set to blank
    if (!new RegExp(blankSrc).test(src))
        fixImage();
};

function fixImage() {
    // get src
    var src = element.src;

    // check for real change
    if (src == realSrc && /\.png$/i.test(src)) {
        element.src = blankSrc;
        return;
    }

    if ( ! new RegExp(blankSrc).test(src)) {
        // backup old src
        realSrc = src;
    }

    // test for png
    if (/\.png$/i.test(realSrc)) {
        // set blank image
        element.src = blankSrc;
        // set filter
        element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
                    "AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
    }
    else {
        // remove filter
        element.runtimeStyle.filter = "";
    }
}

function beforePrint() {
    isPrinting = true;
    element.src = realSrc;
    element.runtimeStyle.filter = "";
    realSrc = null;
}

function afterPrint() {
    isPrinting = false;
    fixImage();
}

</script>
</public:component>

        最后在你的css文件里面加上這么一段代碼：

img {
 behavior: url("pngbehavior.htc");
}

一切就好了??！你所有的png圖片在ie6下都會(huì)被支持了?。?/span>

感謝馮·諾依曼先生.是他整出了世界上的第一臺(tái)計(jì)算機(jī),才使得我們這些后人鳥槍換炮,由“剪刀加糨糊”的“學(xué)術(shù)土匪”晉級(jí)為“鼠標(biāo)加剪貼板”的“學(xué)術(shù)海盜”.　　
感謝負(fù)責(zé)答辯的老師.在我也不明白所寫為何物的情況下,他們只問了我兩個(gè)問題——都知道寫的什么嗎？知道；參考文獻(xiàn)都看了么？看了.之后便讓我通過了答辯.他們是如此和藹可親的老師,他們是如此善解人意的老師,他們是如此平易近人而又偉大的老師.