IE6,IE7,IE8 css bug蒐集及瀏覽器兼容性問題解決方法彙總

時間 2019-11-18

標籤 ie6 ie7 ie8 css bug 蒐集瀏覽器兼容性問題解決方法彙總欄目瀏覽器简体版

原文原文鏈接

斷斷續續的在開發過程當中收集了好多的bug以及其解決的辦法，都在這個文章裏面記錄下來了！但願之後解決相似問題的時候可以快速解決，也但願你們能在留言裏面跟進本身發現的ie6 7 8bug和解決辦法！
1：li邊距「無端」增長
　　任何事情都是有緣由的，li邊距也不例外。
　　先描述一下具體情況：有些時候li邊距會忽然增加不少，值也不固定（只在IE6/IE7有這種現象），讓人摸不着頭腦，仔細「研究」發現是因爲其低級元素ul的padding引起，padding的上下值對li有影響，左右無影響。因此只好笨手笨腳地把padding去掉，換成margin。這是能解決問題，但每每不是咱們想要的結果，或許還會引發其餘沒必要要的怪現象。
　　解決這個問題的方法，其實很簡單，既然是有ul引起的，就設置ul的顯示形式爲*display:inline-block;便可，前面加*是隻針對IE6/IE7有效，其餘瀏覽器並不渲染這個屬性。
2：分頁數字字體用「Arial 」加粗不抖動

javascript

複製代碼

代碼以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
<title>無標題文檔</title>
<link href="css/style.css"rel="stylesheet"type="text/css"/>
<style type="text/css">
body, ul, h1 {
font-family:Arial;
font-size:12px;
}
.page {
text-align:center;
}
.page a {
display:inline-block;
padding:5px 8px;
text-decoration:none;
border:1px solid #09F;

color:#FFF;
}
.page a:hover, .page .selected {
border:1px solid #CCC;
background-color:#FFF;
color:#000;
font-weight:bold;
}
</style>
</head>
<body>
<h1>分頁樣式</h1>
<div class="page"> <a href="#">1</a> <a href="#"class="selected">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a>
<a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div>
</body>
</html>

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

php

複製代碼

代碼以下:

/*IE6 專用 */
.content {color:red;}
/* 其餘瀏覽器 */
div>p .content {color:blue;}

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

css

複製代碼

代碼以下:

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

5：IE6100% 高度
　　在IE6下，若是要給元素定義100%高度，必需要明肯定義它的父級元素的高度，若是你須要給元素定義滿屏的高度，就得先給html和body定義height:100%;。
6：IE6躲貓貓bug
　　在IE6和IE7下，躲貓貓bug是一個很是惱人的問題。一個撐破了容器的浮動元素，若是在他以後有不浮動的內容，而且有一些定義了:hover的連接，當鼠標移到那些連接上時，在IE6下就會觸發躲貓貓。
　　解決方法很簡單：
　　1.在（那個未浮動的）內容以後添加一個<span style="clear: both;"> </span>
　　2.觸發包含了這些連接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;
7:IE6絕對定位元素的1像素間距bug
　　IE6下的這個錯誤是因爲進位處理偏差形成（IE7已修復），當絕對定位元素的父元素高或寬爲奇數時，bottom和right會產生錯誤。惟一的解決辦法就是給父元素定義明確的高寬值，但對於液態佈局沒有完美的解決方法。
8:IE下z-index的bug
　　在IE瀏覽器中，定位元素的z-index層級是相對於各自的父級容器，因此會致使z-index出現錯誤的表現。解決方法是給其父級元素定義z-index，有些狀況下還須要定義position:relative。
9: Overflow Bug
　　在IE6/7中，overflow沒法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;。
10: 橫向列表寬度bug
　　若是你使用float:left;把<li>橫向擺列，而且<li>內包含的<a>（或其餘）觸發了 hasLayout，在IE6下就會有錯誤的表現。
　　解決方法很簡單，只須要給<a>定義一樣的float:left;便可。
11: 列表階梯bug
　　列表階梯bug一般會在給<li>的子元素<a>使用float:left;時觸發，咱們本意是要作一個橫向的列表(一般是導航欄)，但IE卻可能呈現出垂直的或者階梯狀。
　　解決辦法就是給<li>定義float:left;而非子元素<a>，或者給<li>定義display:inline;也能夠解決。
12: 垂直列表間隙bug
　　當咱們使用<li> 包含一個塊級子元素時，IE6(IE7也有可能)會錯誤地給每條列表元素（<li>）之間添加空隙。
　　解決方法：把<a>flaot而且清除float來解決這個問題；另一個辦法就是觸發<a>的hasLayout（如定義高寬、使用zoom:1;）；也能夠給<li> 定義display:inline;來解決此問題；另外還有一個極有趣的方法，給包含的文本末尾添加一個空格。
13: IE6調整窗口大小的 Bug
　　當把body居中放置，改變IE瀏覽器大小的時候，任何在body裏面的相對定位元素都會固定不動了。
　　解決辦法：給body定義position:relative;就好了。
14: 文本重複Bug
　　在IE6中，一些隱藏的元素（如註釋、display:none;的元素）被包含在一個浮動元素裏，就有可能引起文本重複bug。
　　解決辦法：給浮動元素添加display:inline;。
15：連接a的title屬性中的文字換行
　　咱們都知道，能夠給連接a加上title屬性，這樣鼠標移動上去會顯示title屬性定義的文字，經常用來加一些提示語句，好比說點擊查看詳情之類的，代碼形如：<a href=」#」 title=」點擊查看詳情」>連接xx</a>。以前一直沒有仔細注意過這個東西。若是鼠標浮動上去要顯示更多東西的話，怎麼實現呢。第一反應是jquery的tooltip插件。今天無心中發現某個學院的網站鼠標移動上去能夠顯示這麼完整的信息，效果看起來彷佛還能夠，就想看看怎麼作的，找了下，沒發現有Javascript腳本，再往連接的地方一看，終於讓我發現了門道了：<a href='#' target="_blank" title="標題: 關於對我校2006年至2009年發展黨員工做狀況進…
發佈日期: 2010-5-31 16:05:08 類別：院務通知點擊: 139">[05-31] 關於對我校2006年至2009年發展黨員工做狀況進…</a>很簡單，只要使用這樣的轉義符號,便可實現換行。在一些tooltip要求定製性不高的狀況下，這樣的顯示效果相當不錯，並且是瀏覽器原生的效果，安逸。雖然號稱精通div+css，可是發現一些小小可是很實用的技巧本身還不知道，看來html還有不少東西能夠挖掘。
16：如何去掉點擊連接時的虛線
　　解決方案1：在<a href="http://blog.sina.com/wangfengteacher"onFocus="this.blur()> Mike blog</a>
　　解決方案2：在標籤中加入 hidefocus<a href="http://blog.sina.com/wangfengteacher"hidefocus> Mike blog</a>
　　解決方案3: 若是鏈接太多，能夠用外部連接 .HTC 文件。如，blur.htc
　　文件內容以下：

html

複製代碼

代碼以下:

　　<public:attach event="onfocus"
　　onevent="makeblur()"></public:attach>
　　<SCRIPT language=javascript>
　　function makeblur(){
　　this.blur();
　　}
　　</SCRIPT>

　　在 CSS 中加入以下代碼：

java

複製代碼

代碼以下:

　　A { behavior:url(blur.htc); }

　　解決方案4 ( 推薦 )：使用CSS樣式，可加入代碼：a {blr:expression_r(this.onFocus=this.blur())}
　　若是是FF等瀏覽器的話可這樣寫 a{ouline:none;}
17:製做1px細線表格
解決方案1 ( 推薦)：咱們只要給這個table一個border-collapse:collapse的樣式，就能夠達到這個效果了。
具體以下：
一、HTML結構:

jquery

複製代碼

代碼以下:

18：IE6 下z-index無效
　　在CSS中，經過z-index這個屬性改變層級，要讓z-index起做用有個前提，就是元素的position屬性要是relative，absolute或是fixed。z-index層級越高，內容越應該在上面顯示。在大部分的瀏覽器在大部分的狀況下，確實如此，可是不絕對，尤爲遇到IE6。
　　如下全部結果截圖的大背景以下：
　　一、頁面上固定不動的，一成不變的，送豪宅也不會從良的是一個黑色背景，透明度 40%，幾乎滿屏顯示的層級爲1的絕對定位層。HTML爲：
　　<div></div>
　　對應CSS爲：

web

複製代碼

代碼以下:

#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

　　做用是爲了讓層級關係一目瞭然。看：
　　這說明內容在z-index爲1的絕對定位層之下。
　　這說明內容在z-index爲1的絕對定位層之上。
　　二、頁面上作對比的是美女圖片，圖片在半透明黑色絕對定位層的上面仍是下面很容易辨別，這樣，您就可以對我所說的z- index不起做用有很直觀的認識了。
　　二、IE6的抱怨：浮動讓我沉淪
　　如今開始真正的講述問題的產生，緣由以及解決了。首先講講第一種z-index不管設置多高都不起做用狀況。這種狀況發生的條件有三個：一、父標籤 position屬性爲relative；二、問題標籤無position屬性（不包括static）；三、問題標籤含有浮動(float)屬性。
　　您能夠拿下面的代碼本身作個簡單測試：

chrome

複製代碼

代碼以下:

丫的，這z-index都9999了，層級夠高吧，可是，看下面的圖：
這一對比就知道問題了，可能有人會疑問，這會不會是IE6的relative本身感冒了，而不是浮動(float)攜帶了「甲流病毒」。好，我如今去掉浮動，HTML代碼以下：

express

複製代碼

代碼以下:

結果IE6下：
　　我想，問題應該都清楚了，至於緣由，我起初覺得是haslayout搞的鬼，後來，用zoom一測試，發現不是（IE7 下無此bug也證實不是 haslayout的緣由），彷佛就是這個float會讓z-index失效。因爲將外部div的position:relative屬性改成 absolute能夠解決這一問題，我就懷疑是否是浮動讓relative發生了些變化，float與relative在水平定位上能夠說是近親，會不會是由於這二者攪和在一塊兒因此什麼「畸形」「體弱多病」就出現了。這僅是個人猜想而已，真正的緣由仍是去問IE6的後媽吧。
　　解決方法，解決方法有三，一、position:relative改爲position:absolute；二、去除浮動；三、浮動元素添加position屬性（如relative，absolute等）。
　　三、執拗的IE6：它只認第一個爸爸
　　可能很多人知道，這IE6下，層級的高低不只要看本身，還要看本身的老爸這個後臺是否夠硬。用術語具體描述爲：
　　父標籤position屬性爲relative 或absolute時，子標籤的absolute屬性是相對於父標籤而言的。而在IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。
　　有必定經驗的人可能都知道上面的事實。可是，相信這裏面不少人不知道IE6下，決定層級高低的不是當前的父標籤，而是整個DOM tree（節點樹）的第一個relative屬性的父標籤。有時平時咱們多處理一個父標籤，z-index層級多而複雜的狀況很少見，因此不免會有認識上的小小誤差。
　　好，下面展現這個bug。
條件很簡單，只要絕對定位的第一個元素的第一個爸爸，或者說是最老的那個爸爸級別的人的relative屬性小於黑色半透明層的z-index層級。例以下面的HTML代碼：

瀏覽器

複製代碼

代碼以下:

能夠看到，mm3圖片的父標籤div 是絕對定位，層級9999，比1大多了，絕對定位的父標籤層級1000(10000也同樣)，也比黑色半透明層的z-index:1大多了，可是，咱們可憐的IE6童鞋——
再看看以Firefox爲表明的其餘童鞋：
IE7與IE6有着一樣的bug，緣由很簡單，雖然圖片所在div當前的老爸層級很高(1000)，可是因爲老爸的老爸不頂用，可憐了9999如此強勢的孩子沒有出頭之日啊！
知道緣由解決就很輕鬆了，給第一任老爸添加z-index後的HTML代碼以下：

複製代碼

代碼以下:

結果IE6童鞋喜笑顏開，春光燦爛：
19：css reset中的list-style:none
　　在IE6,7下,當UL不具備float:left;display:inline;時:不管有沒有list-style:none這個屬性,列表符都被隱藏,不佔位置(下面代碼中的5,6)當UL具備float:left;display:inline;屬性時list- style:none,列表符被隱藏,可是仍然留有位置(list-style-position:inside);未設置list-style:none;列表符被隱藏,也不佔位(list-style-position:outside)在firefox中只要list-style-type爲none ,則不管list-stype-position的值爲outside或inside , list-style都能很好的被隱藏而在IE6,7中,僅設置list-style:none,並不足以解決全部問題因此我認爲在css reset的時候使用 list-style:none outside none 更好
20：連接去邊線（徹底兼容）

複製代碼

代碼以下:

　　a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

21: display:inline-block 額外產生的6PX 或者4px margin
今天在作一個Timeline的模塊的時候遇到一個棘手的問題：給元素添加display:inline-block 屬性的時候會產生額外的4px的margin-right。
原始代碼

複製代碼

代碼以下:

.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;

position:relative;
}

頁面渲染結果：
每一列都會向右產生外邊距4px，苦思不得其解，嘗試負的外邊距，可是涉及到其餘的問題:每一個li標籤會重疊1-2個px，妨礙到鼠標hover狀態的事件。嘗試修改doctype類型也不見效果。後來嘗試了另一個方法：把原來的HTML 代碼結構：更改成：這樣就不會產生額外的外邊距，也弄不清楚爲何會出現這種問題。先暫時記下，之後再研究研究。
22: IE6中僞類:hover的使用及BUG
之前不曾遇到相似的問題，一番google，才知道這是IE6處理CSS僞類:hover的Bug。例如以下的代碼：

複製代碼

代碼以下:

在IE7/FF中，鼠標移動到連接上時，」淘你喜歡」字樣會變爲紅色，但IE6則無反應。因此IE6的bug就是若是a 與 a:hover 的css定義是同樣的，也就是說若是a:hover 中沒有樣式的改變，hover就不會被觸發。但若是在a:hover{}增長一些特定的屬性，例如

複製代碼

代碼以下:

a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}

此時hover就能夠觸發了。
23：原來IE6支持!important

複製代碼

代碼以下:

.demo { color:#F00!important; color:#000; }/*IE6顯示錯誤理解：.demo顯示爲黑色*/
/*而下面IE6是正確理解的：.demo顯示爲紅色*/
.demo { color:#F00!important;}
.demo { color:#000; }

24:去掉button按鈕左右兩邊的留白

複製代碼

代碼以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{padding:0; margin:0}
input,button{overflow:visible;padding:0;}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="button" id="button" value="button按鈕左右留白的解決方法" />
</form>
<button><span>button按鈕左右留白的解決方法</span></button>
</body>
</html>

25:中文字體在css中的寫法
黑體SimHei\9ED1\4F53黑體
宋體SimSun\5B8B\4F53宋體
新宋體 NSimSun\65B0\5B8B\4F53新宋體
仿宋FangSong\4EFF\5B8B仿宋
楷體KaiTi\6977\4F53 楷體
微軟正黑體Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微軟正黑體
微軟雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微軟雅黑
幼圓 YouYuan\5E7C\5706幼圓
26： ie6裏width:100%是相對於上有高度設置的元素其餘瀏覽器是相對於上個相對定位或絕對定位的元素

複製代碼

代碼以下:

<div style=" width:600px; height:600px; background:#000;">
<div style=" width:500px; height:500px; background:#333;">
<div style=" float:left; background:#666; width:400px;" >
<div style=" width:300px; height:300px; background:#999;">
<div style=" width:100%; height:100%; background:#f00; position:absolute; left:0; top:0;">
在非ie6的瀏覽器中都是滿屏幕的紅，說明非ie6的瀏覽器的width和height的百分比，都是相對的上個相對定位或者絕對定位的元素，沒有就爲html元素，而ie6中的width和height 的百分比，相對的是上個有高寬顯示設置的元素，並且height的百分比設置失效，因此上述代碼在ie6中就出現寬度穿越了他的父元素而碰見width:500px;的元素的時候，邊把本身設置成了width:500px;而height的設置則失效，這個，讓人很蛋疼！ie6，真的該早點走了！
</div>
</div>
</div>
</div>
</div>

27： ie不緩存背景圖片的解決辦法
高性能web開發中，一張小小的圖片請求能省的就省，可IE6存在不緩存背景圖的bug.若是重複使用了一個圖片做爲背景，那麼每用一次就會從新去服務器拉一次。。。給服務器帶來巨大的壓力。解決方法有兩種，
1：採用JS

複製代碼

代碼以下:

2.在頁面上直接使用1個DIV元素來加載該圖片，這樣加載圖片就能真正被緩存，鼠標移動也不會發送請求了。
28:ie6下css實現max/min-width/height

複製代碼

代碼以下:

_width:expression(this.width>300?"300px":ture); max-width:300px;
_height:expression(this.height>300?"300px":ture); max-height:300px;

29：css空白外邊距互相疊加的解決方法

複製代碼

代碼以下:

body{width:300px; font-family:'微軟雅黑'; font-size:1em; text-indent:10px; line-height:1.25;}
div{background:#000;margin:10px;}
div p{background:#f60;margin:15px}

這是一個div元素內嵌套p的簡單樣例,先別複製保存爲html測試,在你看完上面的代碼後,你是否覺得它出爲你呈現以下圖的效果?
好,如今你能夠複製上面代碼,保存到本地,而後在瀏覽器中打開.你會驚訝的發現,它呈現給你的效果是這樣的:
爲何會這樣呢?按CSS中,對於有塊級子元素的元素計算高度的方式,若是元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離.故,子元素的頂部和底部空白邊就突出到元素的外圍了.p元素的15px外邊距與div元素的10px的外邊距造成一個單一的15px垂直空白邊,另外,形式的這個空白邊並不是爲div所包圍,而是呈如今div的外圍.因此,咱們看到了第二張效果圖.
如何解決?本人比較推薦兩種解決方式:
其一,爲外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px solid #ddd;
其二,爲外圍元素定義內邊距填充..具體到本例,即在樣式div中加入padding:1px
另外,還能夠經過外圍元素絕對定位,或者定義子元素浮動等方式實現.
30：純css解決多行文字垂直居中

複製代碼

代碼以下:

其大概原理爲：第一個alert_blank容器，display:inline之後做爲行內元素，它的高度爲100%，寬度卻爲0，至關於緊貼外層容器左邊框的一條透明的線，這樣就使得外層容器裏面只存在一行。外層容易的vertical-align:middle使得其內部至關於一行文字垂直居中。真正盛放內容的div也是display:inline，它對外和blank垂直居中，只要內部文字不超過blank的高度，這個效果將是完美的。雖然從語義化上講，用空白div佈局說不太過去，可是瑕不掩瑜。另：zoom:1是爲了觸發hasLayout。
31:關於flash遮蓋div浮動層
(a) place Flash embed script in <div> container (I use SWFObject.js)[將flash嵌入腳本放到一個div容器中]
(b) add wmode=transparent to Flash embed script[增長wmode=transparent 到flash嵌入腳本]
(c) set <div id="flashcontent"> container with z-index:-1; [將外層容器的z-index設置爲-1]
(d) set <body> tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)
(e) set floating iframe in container with z-index: 99;[將浮動的iframe在容器中的zindex設置爲99]
(f) use CSS to position flashcontent and htmlcontent containers.[使用css來調整flash容器和html容器的位置]
其餘方案網上比較多見,不作闡述.在此說下使用第一個方案如何解決:
var so = new SWFObject("XXX.swf", "flashId", "寬度", "高度", "版本", "背景色");
//設置flash不遮蓋div層
so.addParam("wmode", "opaque");
so.write("flashcontent");
如此設置便可讓flash沒法遮蓋住div
32:如何處理ie6的文字行高
ie6下漢字就會顯示偏上位置，而在標準瀏覽器中不存在這個問題字體 Tahoma,試下
不過若是有規定第一個字體是用啥的，那就只能忽略這個問題..我終於明白淘寶爲啥把Tahoma字體放到第一位了

複製代碼

代碼以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試ie6的文字行高表現</title>
<style type="text/css">
body,ul,li,p {margin:0;padding:0;}
body { font:12px/1.5 Tahoma,"宋體",Arial, Helvetica, sans-serif; }
ul {float:left;list-style:none; margin-bottom:10px;}
ul li, p { margin-top:4px;background:silver;clear:left;}
ul li {float:left;margin-top:4px;}
</style>
</head>
<body>
<ul>
<li>歲月不饒人哪</li>
<li>hjgt</li>
</ul>
<p>歲月不饒人哪</p>
<p>hjgt</p>
</body>
</html>

33:利用 CSS 跨瀏覽器地隱藏文字一法

複製代碼

代碼以下:

ont-size:0; // for firefox & opera
color: transparent; // for webkit
overflow:hidden; // for IE
font-size:0;
filter:alpha(opacity=0);

自測後兼容的瀏覽器以下：
IE 6-8
Firefox 1-4
Opera 9-10
Safari 3-5
Chrome 1-6
34:button在chrome下默認有2px的margin
<button>在chrome下有兩像素margin</button>
35:ie6和ie7裏面margin失效

複製代碼

代碼以下:

<div style="padding:20px;background:#f00;">
<div style="background:#fff;height:200px;margin:50px;">個人margin在ie裏面失效了</div>

解決辦法去掉裏面div的高度