再談ie6,ie7,ie8 css bug兼容問題
1：li邊距“無故”增加
任何事情都是有原因的，li邊距也不例外。
先描述一下具體狀況：有些時候li邊距會突然增 加很多，值也不固定（只在IE6/IE7有這種現象），讓人摸不著頭腦，仔細“研究”發現是由于其低級元素ul的padding引 起，padding的上下值對li有影響，左右無影 響。所以只好笨手笨腳地把padding去掉，換成margin。這是能解決問題，但往往不是我們想要的結果，或許 還會引起其他不必要的怪現象。
現在終于發現解決這個問題的方法，其實很簡單，既然是有ul引 起的，就設置ul的顯示形式為*display:inline-block;即可，前面加*是只 針對IE6/IE7有效，其他瀏覽器并不渲染這個屬性。
2：分頁數字 字體用“Arial ”加粗不抖動
<!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;
background-color:#0CF;
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+及其他瀏覽器。
/*IE6 專用 */
.content {color:red;}
/* 其他瀏覽器 */
div>p .content {color:blue;}
4：IE6最小高度
IE6 不支持min-height屬性，但它卻認為height就是最小高度。解決方法：
使用ie6不支持但其余瀏覽器支持的屬性!important。
#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
文件內容如下：
<public:attach event="onfocus"
onevent="makeblur()"></public:attach>
<SCRIPT language=javascript>
function makeblur(){
this.blur();
}
</SCRIPT>
在 CSS 中加入如下代碼：
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的樣式，就可以達到這個效果了。
具體如下：
1、HTML結構:
<table width="300" border="1" cellpadding="0"cellspacing="0" bordercolor="#C0C0C0"
style="border-collapse:collapse;">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
18：IE6 下z-index無效
在CSS中，通過z-index這個屬性改變層級，要讓z-index起作用有個前提，就是元素的position屬性要 是relative，absolute或是fixed。
z-index層級越高，內容越應該在上面顯示。在大部分的瀏覽器在大部分的情況下，確實如此，但是不絕對，尤其遇到IE6。
1、關于效果截圖的些必要說明
下面的不是廢話，是為了更容易的理解我下面唾沫橫飛的內容。
以下所有結果截圖的大背景如下：
1、頁面上固定不動的，一成不變的，送豪宅也不會從良的是一個黑色背景，透明度 40%，幾乎滿屏顯示的層級為1的絕對定位層。HTML為：
<div></div>
對應CSS為：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
作用是為了讓層級關系一目了然?？矗?/p>
這說明內容在z-index為1的絕對定位層之下。
這說明內容在z-index為1的絕對定位層之上。
2、頁面上做對比的是美女圖片，圖片在半透明黑色絕對定位層的上面還是下面很容易辨別，這樣，您就能夠對我所說的z- index不起作用有很直觀的認識了。
2、IE6的抱怨：浮動讓我沉淪
現在開始真正的講述 問題的產生，原因以及解決了。首先講講第一種z-index無論設置多高都不起作用情況。這種情況發生的條件有三個：1、父標簽 position屬性為relative；2、問題標簽無position屬性（不包括static）；3、問題標簽含有浮動(float)屬性。
您 可以拿下面的代碼自己做個簡單測試：
<div></div>
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>
丫的，這z-index都9999了，層級夠高吧，但是，看下面的圖：
這一對比就知道問題了，可能有人會疑問，這會不會是IE6的relative自己感冒了，而不是浮動(float)攜帶 了“甲流病毒”。好，我現在去掉浮動，HTML代碼如下：
<div></div>
<div style="position:relative; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>
結果IE6下：
我想，問題應該都清楚了，至于原因，我起初以為是haslayout搞的鬼，后來，用zoom一測試，發現不是（IE7 下無此bug也證明不是 haslayout的原因），似乎就是這個float會讓z-index失效。由于將外部div的position:relative屬性改為 absolute可以解決這一問題，我就懷疑是不是浮動讓relative發生了些變化，float與relative在水平定位上可以說是近親，會不會 是因為這兩者攪和在一起所以什么“畸形”“體弱多病”就出現了。這僅是我的猜測而已，真正的原因還是去問IE6的后媽吧。
解決方法，解決方法有三，1、position:relative改 為position:absolute；2、去除浮動；3、浮動 元素添加position屬性（如relative，absolute等）。
3、固執的IE6：它只認第一個爸爸
可能不少人知 道，這IE6下，層級的高低不僅要看自己，還要看自己的老爸這個后臺是否夠硬。用術語具體描述為：
父標簽position屬性為relative 或absolute時，子標簽的absolute屬性是相對于父標簽而言的。而在IE6下，層級的表現有時候不是看子標簽的z-index多高，而要看它 們的父標簽的z-index誰高誰低。
有一定經驗的人可能都知道上面的事實。但是，相信這里面很多人不知道IE6下，決定層級高低的不是當前的父標簽，而是整 個DOM tree（節點樹）的第一個relative屬性的父標簽。有時平時我們多處理一個父標簽，z-index層級多而復雜的情況不多見，所以難免會有認識上 的小小偏差。
好，下面展示這個bug。
條件很簡單，只要絕對定位的第一個元素的第一個爸爸，或者說是最老的那個爸爸級別的人的relative屬性小于黑色半 透明層的z-index層級。例如下面的HTML代碼：
<div></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
可以看到，mm3圖片的父標簽div 是絕對定位，層級9999，比1大多了，絕對定位的父標簽層級1000(10000也一樣)，也比黑色半透明層的z-index:1大多了，但是，我們可 憐的IE6童鞋——
再看看以Firefox為代表的其他童鞋：
IE7與IE6有著同樣的bug，原因很簡單，雖然圖片所在div當前的老爸層級很高(1000)，但是由于老爸的老爸 不頂用，可憐了9999如此強勢的孩子沒有出頭之日??！
知道原因解決就很輕松了，給第一任老爸添加z-index后的HTML代 碼如下：
<div></div>
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
結果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;
background-color:#00FF00;
position:relative;
}
頁面渲染結果：
每一列都會向右產生外邊距4px，苦思不得其解，嘗試負的外邊距，但是涉及到其他的問題:每個li標簽會重疊1-2個px，妨礙到鼠標hover狀 態的事件。嘗試修改doctype類型也不見效果。后來嘗試了另外一個方法：
把原來的HTML 代碼結構：
更改為：
這樣就不會產生額外的外邊距，也弄不清楚為什么會出現這種問題。先暫時記下，以后再研究研究。
22: IE6中偽類:hover的使用及BUG
以前未曾遇到類似的問題，一番google，才知道這是IE6處理CSS偽類:hover的Bug。例如如下的代碼：
<style>
a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.ratethedick.com.com“> 瑞奇網絡 <span> 網站建設 </span></a>
在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
var ua = navigator.userAgent.toLowerCase();
var isIE6 = ua.indexOf("msie 6") > -1;//判斷是否為IE6
// remove css image flicker
//IE6下默認不緩存背景圖片，CSS里每次更改圖片的位置時都會重新發起請求，用這個方法告訴IE6緩存背景圖片
if(isIE6){
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
}
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解決多行文字垂直居中
<style type="text/css">
.alert{
width:400px;
height:250px;
display:table-cell;
vertical-align:middle;
line-height:1.5em;
border:1px solid red;
}
.alert_blank{
height:100%;
width:0;
display:inline;
vertical-align:middle;
zoom:1;
}
.alert_con{
width:100%;
zoom:1;
display:inline;
vertical-align:middle;
}
</style>
<div class="alert">
<div class="alert_con">哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～</div>
</div>
其大概原理為：第一個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的高度
