IE6兼容性問題IE6常見bug

時間 2019-11-11

標籤 ie6 兼容性問題常見 bug 欄目瀏覽器简体版

原文原文鏈接

IE6兼容性問題及IE6常見bug詳細彙總css

來源：互聯網做者：佚名時間：03-31 16:03:45 【大中小】html

IE6的兼容性問題一直都是前端工程師的惡夢，爲了早早脫離這種困境，本文整理了一些相關兼容性的知識，感興趣的朋友能夠參考下哈，但願能夠幫助到你前端

一、IE6怪異解析之padding與border算入寬高瀏覽器

緣由：未加文檔聲明形成非盒模型解析緩存

解決方法：加入文檔聲明<!doctype html> 前端工程師

二、IE6在塊元素、左右浮動、設定marin時形成margin雙倍（雙邊距）函數

解決方法：display:inline 佈局

三、如下三種實際上是同一種bug，其實也不算是個bug，舉個例子：父標籤高度20，子標籤11，垂直居中，20-11=9，9要分給文字的上面與下面，怎麼分？IE6就會與其它的不一樣，因此，儘可能避免。字體

1）字體大小爲奇數之邊框高度少1px 優化

解決方法：字體大小設置爲偶數或line-height爲偶數

2）line-height，文本垂直居中差1px

解決方法：padding-top代替line-height居中，或line-height加1或減1

3）與父標籤的寬度的奇偶不一樣的居中形成1px的偏離

解決方法：若是父標籤是奇數寬度，則子標籤也用奇數寬度;若是是父標籤偶數寬度，則子標籤也用偶數寬度

四、內部盒模型超出父級時，父級被撐大

解決方法：父標籤使用overflow:hidden

五、line-height默認行高bug

解決方法：line-height設值

六、行標籤之間會有一小段空白

解決方法：float或結構並排(可讀性差，不建議)

七、標籤高度沒法小於19px

解決方法：overflow: hidden;

八、左浮元素margin-bottom失效

解決方法：顯示設置高度 or 父標籤設置_padding-bottom代替子標籤的margin-bottom or 再放個標籤讓父標籤浮動，子標籤

margin- bottom，即(margin-bottom與float不一樣時做用於一個標籤)

九、img於塊元素中，底邊多出空白

解決方法：父級設置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

十、li之間會有間距

解決方法：float: left;

十一、塊元素中有文字及右浮動的行元素，行元素換行

解決方法：將行元素置於塊元素內的文字前

十二、position下的left，bottom錯位

解決方法：爲父級(relative層)設置寬高或添加*zoom:1

1三、子級中有設置position，則父級overflow失效

解決方法：爲父級設置position:relative

如下是補充：上面要先看

一、終極方法：條件註釋

缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

二、CSS選擇器區分

IE6不支持子選擇器；先針對IE6使用常規申明CSS選擇器，而後再用子選擇器針對IE7+及其餘瀏覽器。

複製代碼

代碼以下:

/* IE6 專用 */

.content {color:red;}

/* 其餘瀏覽器 */

div>p .content {color:blue;} -->

三、PNG半透明圖片的問題

雖然能夠經過JS等方式解決，但依然存在載入速度等問題，因此，這個在設計上能避免仍是儘可能避免爲好。以達到網站最大優化。

四、IE6下的圓角

IE6不支持CSS3的圓角屬性，性價比最高的解決方法就是用圖片圓角來替代，或者放棄IE6的圓角。

五、IE6背景閃爍

若是你給連接、按鈕用CSS sprites做爲背景，你可能會發如今IE6下會有背景圖閃爍的現象。形成這個的緣由是因爲IE6沒有將背景圖緩存，每次觸發hover的時候都會從新加載，能夠用JavaScript設置IE6緩存這些圖片：

複製代碼

代碼以下:

document.execCommand("BackgroundImageCache",false,true);

六、最小高度

IE6 不支持min-height屬性，但它卻認爲height就是最小高度。解決方法：使用ie6不支持但其他瀏覽器支持的屬性!important。

複製代碼

代碼以下:

#container {min-height:200px; height:auto !important; height:200px;}

七、最大高度

複製代碼

代碼以下:

//直接使用ID來改變元素的最大高度

var container = document.getElementById('container');

container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

//寫成函數來運行

function setMaxHeight(elementId, height){

var container = document.getElementById(elementId);

container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";

}

//函數示例

setMaxHeight('container1', 200);

setMaxHeight('container2', 500);

八、100% 高度

在IE6下，若是要給元素定義100%高度，必需要明肯定義它的父級元素的高度，若是你須要給元素定義滿屏的高度，就得先給html和body定義height:100%;。

九、最小寬度

同max-height和max-width同樣，IE6也不支持min-width。

複製代碼

代碼以下:

//直接使用ID來改變元素的最小寬度

var container = document.getElementById('container');

container.style.width = (container.clientWidth < width) ? "500px" : "auto";

//寫成函數來運行

function setMinWidth(elementId, width){

var container = document.getElementById(elementId);

container.style.width = (container.clientWidth < width) ? width + "px" : "auto";

}

//函數示例

setMinWidth('container1', 200);

setMinWidth('container2', 500);

十、最大寬度

複製代碼

代碼以下:

//直接使用ID來改變元素的最大寬度

var container = document.getElementById(elementId);

container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

//寫成函數來運行

function setMaxWidth(elementId, width){

var container = document.getElementById(elementId);

container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

}

//函數示例

setMaxWidth('container1', 200);

setMaxWidth('container2', 500);

十一、雙邊距Bug

當元素浮動時，IE6會錯誤的把浮動方向的margin值雙倍計算。我的以爲較好解決方法是避免float和margin同時使用。

十二、清除浮動

若是你想用div(或其餘容器)包裹一個浮動的元素，你會發現必須給div(容器)定義明確的height、width、overflow之中一個屬性（除了auto值）才能將浮動元素嚴實地包裹。

複製代碼

代碼以下:

#container {border:1px solid #333; overflow:auto; height:100%;}

#floated1 {float:left; height:300px; width:200px; background:#00F;}

#floated2 {float:right; height:400px; width:200px; background:#F0F;}

更多：http://www.twinsenliang.net/skill/20090413.html

1三、浮動層錯位

當內容超出外包容器定義的寬度時，在IE6中容器會忽視定義的width值，寬度會錯誤地隨內容寬度增加而增加。

浮動層錯位問題在IE6下沒有真正讓人滿意的解決方法，雖然可使用overflow:hidden;或overflow:scroll;來修正，但hidden容易致使其餘一些問題，scroll會破壞設計；JavaScript也無法很好地解決這個問題。因此建議是必定要在佈局上避免這個問題發生，使用一個固定的佈局或者控制好內容的寬度（給內層加width）。

1四、躲貓貓bug

在IE6和IE7下，躲貓貓bug是一個很是惱人的問題。一個撐破了容器的浮動元素，若是在他以後有不浮動的內容，而且有一些定義了:hover的連接，當鼠標移到那些連接上時，在IE6下就會觸發躲貓貓。

解決方法很簡單：

1.在（那個未浮動的）內容以後添加一個<span style="clear: both;"> </span>

2.觸發包含了這些連接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;

1五、絕對定位元素的1像素間距bug

IE6下的這個錯誤是因爲進位處理偏差形成（IE7已修復），當絕對定位元素的父元素高或寬爲奇數時，bottom和right會產生錯誤。惟一的解決辦法就是給父元素定義明確的高寬值，但對於液態佈局沒有完美的解決方法。

1六、3像素間距bug

在IE6中，當文本(或無浮動元素)跟在一個浮動的元素以後，文本和這個浮動元素之間會多出3像素的間隔。

給浮動層添加 display:inline 和 -3px 負值margin

給中間的內容層定義 margin-right 以糾正-3px

1七、IE下z-index的bug

在IE瀏覽器中，定位元素的z-index層級是相對於各自的父級容器，因此會致使z-index出現錯誤的表現。解決方法是給其父級元素定義z-index，有些狀況下還須要定義position:relative。

1八、Overflow Bug

在IE6/7中，overflow沒法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;。

1九、橫向列表寬度bug

若是你使用float:left;把<li>橫向擺列，而且<li>內包含的<a>（或其餘）觸發了 hasLayout，在IE6下就會有錯誤的表現。解決方法很簡單，只須要給<a>定義一樣的float:left;便可。

20、列表階梯bug

列表階梯bug一般會在給<li>的子元素<a>使用float:left;時觸發，咱們本意是要作一個橫向的列表(一般是導航欄)，但IE卻可能呈現出垂直的或者階梯狀。解決辦法就是給<li>定義float:left;而非子元素<a>，或者給<li>定義display:inline;也能夠解決。

2一、垂直列表間隙bug

當咱們使用<li> 包含一個塊級子元素時，IE6(IE7也有可能)會錯誤地給每條列表元素（<li>）之間添加空隙。

解決方法：把<a>flaot而且清除float來解決這個問題；另一個辦法就是觸發<a>的hasLayout（如定義高寬、使用zoom:1;）；也能夠給<li> 定義display:inline;來解決此問題；另外還有一個極有趣的方法，給包含的文本末尾添加一個空格。

2二、IE6中的:hover

在IE6中，除了(須要有href屬性)才能觸發:hover行爲，這妨礙了咱們實現許多鼠標觸碰效果，但仍是有一些法子是能夠解決它的。最好是不要用:hover來實現重要的功能，僅僅只用它來強化效果。

2三、IE6調整窗口大小的 Bug

當把body居中放置，改變IE瀏覽器大小的時候，任何在body裏面的相對定位元素都會固定不動了。解決辦法：給body定義position:relative;就好了。

2四、文本重複Bug

在IE6中，一些隱藏的元素（如註釋、display:none;的元素）被包含在一個浮動元素裏，就有可能引起文本重複bug。解決辦法：給浮動元素添加display:inline;。

來自 <http://www.jb51.net/css/76894.html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。