Ie6 Ie7 常見 相容問題解決方案

下面是14條特殊情況你看一下是哪個問題出錯了這些僅供參考：

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

2.ff下容器高度限定，即容器定義了height之後，容器邊框的外形就确定了，不會被内容撐大，而ie下是會被内容撐大，高度限定失效。是以不要輕易給容器定義height。

3.橫向上的撐破容器問題，。如果float 容器未定義寬度，ff下内容會盡可能撐開容器寬度，ie下則會優先考慮内容折行。故，内容可能撐破的浮動容器需要定義width。

小實驗：有興趣大家可以看看這段實驗。在不同浏覽器下分别測試以下各項代碼。

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>

上面的代碼在不同浏覽器中是不一樣的，實驗起源于對小height 值div 的運用，<div style=”height:10px;overflow:hidden”></div>，小height 值要配合overflow:hidden一起使用。實驗好玩而已，想說明的是，浏覽器對容器的邊界解釋是大不相同的，容器内容的影響結果各不相同。

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

5.mirror margin bug，當外層元素内有float元素時，外層元素如定義margin-top:14px，将自動生成margin-bottom:14px。 padding也會出現類似問題，都是ie6下的特産，該類bug 出現的情況較為複雜，遠不隻這一種出現條件，還沒系統整理。解決方案：外層元素設定border 或 設定float。

引申：ff 和ie 下對容器的margin-bottom，padding-bottom的解釋有時不一緻，似乎與之相關。

6. 吞吃現象。還是ie6，上下兩個div，上面的div設定背景，卻發現下面沒有設定背景的div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。解決方案：使用zoom:1。這個zoom好象是專門為解決ie6 bug而生的。

7.注釋也能産生bug~~~“多出來的一隻豬。”這是前人總結這個bug使用的文案，ie6的這個bug 下，大家會在頁面看到豬字出現兩遍，重複的内容量因注釋的多少而變。解決方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法寫注釋。

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

<div>

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

</div>

把div的border打開，你發現圖檔底部不是緊貼着容器底部的，是img後面的空白字元造成，要消除必須這樣寫

<div>

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

後面兩個标簽要緊挨着。ie7下這個bug 依然存在。解決方案：給img設定 display:block。

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

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什麼的，你可以嘗試去調整img 和文字讓他們在ie和ff下能一緻，你會發現怎麼調都不會讓你滿意。索性讓img 和文字都 float起來，用margin 調整。

10.clear層應該單獨使用。也許你為了節省代碼把clear屬性直接放到下面的一個内容層，這樣有問題，不僅僅是ff和op下失去margin效果，ie下某些margin值也會失效

<div style=”background:red;float:left;”>dd</div>

<div style=”clear:both;margin-top:18px;background:green”>ff</div>

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

12.ie6下嚴重的bug，float元素如沒定義寬度，内部如有div定義了height或zoom:1，這個div就會占滿一整行，即使你給了寬度。float元素如果作為布局用或複雜的容器，都要給個寬度的。

13.ie6下的bug，絕對定位的div下包含相對定位的div，如果給内層相對定位的div高度height具體值，内層相對層将具有100%的width值，外層絕對層将被撐大。解決方案給内層相對層float屬性。

14.width:100%這個東西在ie裡用很友善，會向上逐層搜尋width值，忽視浮動層的影響，ff下搜尋至浮動層結束，如此，隻能給中間的所有浮動層加width:100%才行，累啊。opera這點倒學乖了跟了ie。

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

ie的float bug(ie6,ie7)使前端工程師們為之困擾,最常見的現象就是:當浮動元素的父級元素在拖動滾動條的時候出現邊框的缺失,對于此類問題的解決方案就是使浮動元素獲得布局.

在諸多的情況中,因為頁面需要寬度自由伸縮而不能申明寬度為固定值,但我們可以設定*height:1%;,*在這裡可謂是舉足輕重,因為*隻能被 ie7及以下版本解析,ie8并不識别此類寫法,是以可以使用這個寫法來差別ie8和其他版本号的ie浏覽器.對網上流行的ie8 beta1的hack,也算是一個補充.

一些常用的hack測試

* 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），具體規則與正則中的比對很相似：

E[att^=’val’] //子串以’val’ 開始

E[att$=’val’] //子串以’val’ 結束

E[att*=’val’] //子串中包含’val’

IE8 支援絕大多數基本的 CSS2.1 選擇器，不支援的包括但不限于：[:first-line] 、[:first-letter]。

對于 CSS2.1 中的 generated content 部分，即通過使用僞元素 :before 和 :after 添加文本内容，IE8 中支援 并未完全 。

而對于幾乎在其他浏覽器中都支援的 opacity 和 RGBA ，IE8 中依舊沒有支援。

對于原來用來區分 IE 的 HACK 在 IE8 中基本失效（比如*property:value、*property:value等）。

原有 IE 的 list-item whitespace bug 在 IE8 中依舊存在。

原有 IE 的 z-index bug 在 IE8 中依舊存在。

IE8 中産生新的 bug：當 line-heigth 小于正常值時，超出的部分将被裁切掉。

IE8 中依然不支援 display:table 。

IE8 中依然不支援 border 的 transparent 值。

IE8 中 @import 隻支援三層嵌套。

IE8中 border的 transparent 不被支援

IE8中産生新的BUG：line-heigth BUG

　隻針對IE8的hack，可以是屬性也可以是類

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

BUG描述：

頁面中某DIV使用了position:relative，結合top=-25px等元素定位。在FF和IE7下表現正常，但是在IE6中該DIV會随滑鼠滾動而滾動。

分析：

這是IE6一個已知的BUG：當某position:relative元素被帶有overflow:auto/scroll屬性的塊級元素包含時，會表現出postion:absolute的行為。

解決方法：

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

2.把該元素的position:relative屬性去掉，使用預設的static定位，并通過margin-top等屬性實作類似的效果。

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

ie6的末日即将來臨,對我們前端開發人員來說,無疑是一個慰藉人心的喜訊.但這個末日也并非朝日可至,是以我們還是争取最後的勝利,用各種 hack和方法來規避ie6下雙邊距,背景透明,重複文字等等一堆bug.下面是轉載自前端觀察(譯自www.sitepoint.com)中的10個修複ie6下bug技巧:

1. 使用DOCTYPE

你應該在一直每個HTML檔案的頭部都使用DOCTYPE，并且我們推薦使用strict 版本，比如：

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

或者，對于XHTML使用:

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

你需要處理的最棘手的事情就是IE6進入quirks模式——它已經夠詭異了。

2. 設定position: relative

将一個元素設定為”position:relative”可以解決很多問題，特别是你曾經遇到隐藏的或對齊詭異的盒子。顯然，你需要非常小心點兒，因為絕對定位的子節點可能會是以重新定位。

3. 将浮動元素設定為display:inline

具有margin屬性的浮動元素可能引起著名的IE6雙倍margin問題，比如，你為一個元素指定margin-left為5px，但是IE6中實際上卻表現為10px。”display:inline”将解決這個問題，盡管這不是必須的，你的CSS仍然是有效的。

4. 将一個元素設定為hasLayout

很 多IE6(和IE7)的渲染問題可以通過設定元素的hasLayout來解決。這是一個IE内部屬性（IE隐藏的，更多關于haslayout的資料，可 以參閱這裡），用來确定相對于其他元素，内容是如何布局和定位的。如果你需要設定一個inline元素(比如一個連結)為block元素，或者是應用透明 效果，設定hasLayout也可能是必須的。

最簡單的設定 hasLayout的方法是為CSS設定一個高度或寬度（zoom也可以用，但是zoom并不是CSS标準的一部分）。我們推薦設定實際尺寸，但是問題是這是不現實的，你可能需要使用”height:1%”。如果父元素并沒有設定高度，該元素的實際高度并不受影響，而且這個時候hasLayout已經被啟用。

5. 修正重複文字bug

複雜的布局可以觸發在浮動元素的最後一些字元可能出現在出現在清除元素下面的bug。這裡有幾個解決方法，有些是完美的，但是做一些反複試驗也是必須的：

.確定所有的元素使用”display:inline;”

.在最後一個元素上使用一個”margin-right:-3px;”

.為浮動元素的最後一個條目使用一個條件注釋，比如：

<!--[if !IE]>Put your commentary in here...<![endif]-->

.在容器的最後元素使用一個空的div(它也有必要設定寬度為90%或類似寬度。

>>>>>>你還可以通路positioniseverything.net 檢視該問題的完整介紹。

6. 在可點選和懸停的元素上隻使用<a>标簽

IE6隻認識對a标簽的CSS hover效果。

你也可以在基于JavaScript的元件内使用他們來控制，以使他們保持鍵盤的可操作性。是有一些可替代的選擇，但是<a>标簽比其它方案更可靠。

7. 使用!important 或進階選擇器來區分IE6

不使用傳統Hack或在額外檔案中的條件CSS的方法，寫出特别針對IE6的可行的代碼也還是有可能的。比如最小高度可以通過這段代碼來定義：

#element {

min-height: 20em;

height: auto !important;

height: 20em;

#element[id] {

height: auto;

}

8. 避免百分比機關

百分比會把IE搞糊塗的。除非你可以确切的控制每一個父元素的大小，才可能做到最佳預防。你可以通過!important在其他浏覽器中繼續使用百分比，比如：

body {

margin: 2% 0 !important;

margin: 20px 0;

}

9. 盡早測試并不斷測試

不要等到你的網站或應用完成了才測試IE6;這樣的話問題可能更糟糕，而且會花更多時間來修正。如果你的網站能夠在Firefox和IE6中正常運作，那麼一般在其它浏覽器就不會有問題。

10. 重構你的代碼

經常發生的事情是，修正bug要比重新考慮一個布局問題要花更長的時間。對HTML做些小改動和一些簡單的CSS常常更有效。這可能意味着你要放棄完美的代碼，但是會出現較少的長期問題而且将來你會很清楚如果處理這些可能出現的問題。

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

讓IE6支援PNG格式的圖檔

用法：

先複制下面的代碼在記事本中，然後另存為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>

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");}