斷斷續(xù)續(xù)的在開(kāi)發(fā)過(guò)程中收集了好多的bug以及其解決的辦法，都在這個(gè)文章里面記錄下來(lái)了！希望以后解決類似問(wèn)題的時(shí)候能夠快速解決，也希望大家能在留言里面跟進(jìn)自己發(fā)現(xiàn)的ie6 7 8bug和解決辦法！
1：li邊距“無(wú)故”增加
　　任何事情都是有原因的，li邊距也不例外。
　　先描述一下具體狀況：有些時(shí)候li邊距會(huì)突然增 加很多，值也不固定（只在IE6/IE7有這種現(xiàn)象），讓人摸不著頭腦，仔細(xì)“研究”發(fā)現(xiàn)是由于其低級(jí)元素ul的padding引 起，padding的上下值對(duì)li有影響，左右無(wú)影 響。所以只好笨手笨腳地把padding去掉，換成margin。這是能解決問(wèn)題，但往往不是我們想要的結(jié)果，或許 還會(huì)引起其他不必要的怪現(xiàn)象。
　　解決這個(gè)問(wèn)題的方法，其實(shí)很簡(jiǎn)單，既然是有ul引 起的，就設(shè)置ul的顯示形式為*display:inline-block;即可，前面加*是只 針對(duì)IE6/IE7有效，其他瀏覽器并不渲染這個(gè)屬性。
2：分頁(yè)數(shù)字 字體用“Arial ”加粗不抖動(dòng)


3：IE6 CSS選擇器區(qū)分IE6
IE6不支持子選擇器；先針對(duì)IE6使用常規(guī)申明CSS選擇器，然后再用子選擇器針對(duì)IE7+及其他瀏覽器。


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


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


　　在 CSS 中加入如下代碼：


　　解決方案4 ( 推薦 )：使用CSS樣式，可加入代碼：a {blr:expression_r(this.onFocus=this.blur())}
　　如果是FF等瀏覽器的話可這樣寫 a{ouline:none;}
17:制作1px細(xì)線表格
解決方案1 ( 推薦)：我們只要給這個(gè)table一個(gè)border-collapse:collapse的樣式，就可以達(dá)到這個(gè)效果了。
具體如下：
1、HTML結(jié)構(gòu):


18：IE6 下z-index無(wú)效
　　在CSS中，通過(guò)z-index這個(gè)屬性改變層級(jí)，要讓z-index起作用有個(gè)前提，就是元素的position屬性要 是relative，absolute或是fixed。z-index層級(jí)越高，內(nèi)容越應(yīng)該在上面顯示。在大部分的瀏覽器在大部分的情況下，確實(shí)如此，但是不絕對(duì)，尤其遇到IE6。
　　以下所有結(jié)果截圖的大背景如下：
　　1、頁(yè)面上固定不動(dòng)的，一成不變的，送豪宅也不會(huì)從良的是一個(gè)黑色背景，透明度 40%，幾乎滿屏顯示的層級(jí)為1的絕對(duì)定位層。HTML為：
　　<div></div>
　　對(duì)應(yīng)CSS為：


　　作用是為了讓層級(jí)關(guān)系一目了然?？矗?
　　這說(shuō)明內(nèi)容在z-index為1的絕對(duì)定位層之下。
　　這說(shuō)明內(nèi)容在z-index為1的絕對(duì)定位層之上。
　　2、頁(yè)面上做對(duì)比的是美女圖片，圖片在半透明黑色絕對(duì)定位層的上面還是下面很容易辨別，這樣，您就能夠?qū)ξ宜f(shuō)的z- index不起作用有很直觀的認(rèn)識(shí)了。
　　2、IE6的抱怨：浮動(dòng)讓我沉淪
　　現(xiàn)在開(kāi)始真正的講述 問(wèn)題的產(chǎn)生，原因以及解決了。首先講講第一種z-index無(wú)論設(shè)置多高都不起作用情況。這種情況發(fā)生的條件有三個(gè)：1、父標(biāo)簽 position屬性為relative；2、問(wèn)題標(biāo)簽無(wú)position屬性（不包括static）；3、問(wèn)題標(biāo)簽含有浮動(dòng)(float)屬性。
　　您 可以拿下面的代碼自己做個(gè)簡(jiǎn)單測(cè)試：


丫的，這z-index都9999了，層級(jí)夠高吧，但是，看下面的圖：
這一對(duì)比就知道問(wèn)題了，可能有人會(huì)疑問(wèn)，這會(huì)不會(huì)是IE6的relative自己感冒了，而不是浮動(dòng)(float)攜帶 了“甲流病毒”。好，我現(xiàn)在去掉浮動(dòng)，HTML代碼如下：


結(jié)果IE6下：
　　我想，問(wèn)題應(yīng)該都清楚了，至于原因，我起初以為是haslayout搞的鬼，后來(lái)，用zoom一測(cè)試，發(fā)現(xiàn)不是（IE7 下無(wú)此bug也證明不是 haslayout的原因），似乎就是這個(gè)float會(huì)讓z-index失效。由于將外部div的position:relative屬性改為 absolute可以解決這一問(wèn)題，我就懷疑是不是浮動(dòng)讓relative發(fā)生了些變化，float與relative在水平定位上可以說(shuō)是近親，會(huì)不會(huì) 是因?yàn)檫@兩者攪和在一起所以什么“畸形”“體弱多病”就出現(xiàn)了。這僅是我的猜測(cè)而已，真正的原因還是去問(wèn)IE6的后媽吧。
　　解決方法，解決方法有三，1、position:relative改 為position:absolute；2、去除浮動(dòng)；3、浮動(dòng) 元素添加position屬性（如relative，absolute等）。
　　3、固執(zhí)的IE6：它只認(rèn)第一個(gè)爸爸
　　可能不少人知 道，這IE6下，層級(jí)的高低不僅要看自己，還要看自己的老爸這個(gè)后臺(tái)是否夠硬。用術(shù)語(yǔ)具體描述為：
　　父標(biāo)簽position屬性為relative 或absolute時(shí)，子標(biāo)簽的absolute屬性是相對(duì)于父標(biāo)簽而言的。而在IE6下，層級(jí)的表現(xiàn)有時(shí)候不是看子標(biāo)簽的z-index多高，而要看它 們的父標(biāo)簽的z-index誰(shuí)高誰(shuí)低。
　　有一定經(jīng)驗(yàn)的人可能都知道上面的事實(shí)。但是，相信這里面很多人不知道IE6下，決定層級(jí)高低的不是當(dāng)前的父標(biāo)簽，而是整 個(gè)DOM tree（節(jié)點(diǎn)樹(shù)）的第一個(gè)relative屬性的父標(biāo)簽。有時(shí)平時(shí)我們多處理一個(gè)父標(biāo)簽，z-index層級(jí)多而復(fù)雜的情況不多見(jiàn)，所以難免會(huì)有認(rèn)識(shí)上 的小小偏差。
　　好，下面展示這個(gè)bug。
條件很簡(jiǎn)單，只要絕對(duì)定位的第一個(gè)元素的第一個(gè)爸爸，或者說(shuō)是最老的那個(gè)爸爸級(jí)別的人的relative屬性小于黑色半 透明層的z-index層級(jí)。例如下面的HTML代碼：


可以看到，mm3圖片的父標(biāo)簽div 是絕對(duì)定位，層級(jí)9999，比1大多了，絕對(duì)定位的父標(biāo)簽層級(jí)1000(10000也一樣)，也比黑色半透明層的z-index:1大多了，但是，我們可 憐的IE6童鞋——
再看看以Firefox為代表的其他童鞋：
IE7與IE6有著同樣的bug，原因很簡(jiǎn)單，雖然圖片所在div當(dāng)前的老爸層級(jí)很高(1000)，但是由于老爸的老爸 不頂用，可憐了9999如此強(qiáng)勢(shì)的孩子沒(méi)有出頭之日??！
知道原因解決就很輕松了，給第一任老爸添加z-index后的HTML代 碼如下：


結(jié)果IE6童鞋喜笑顏開(kāi)，春光燦爛：
19：css reset中的list-style:none
　　在IE6,7下,當(dāng)UL不具有float:left;display:inline;時(shí):無(wú)論有沒(méi)有l(wèi)ist-style:none這個(gè)屬性,列 表符都被隱藏,不占位置(下面代碼中的5,6)當(dāng)UL具有float:left;display:inline;屬性時(shí)list- style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);未 設(shè)置list-style:none;列表符被隱藏,也不占位(list-style-position:outside)在firefox中只要list-style-type為none ,則 無(wú)論list-stype-position的值為outside或inside , list-style都能很好的被隱藏而在IE6,7中,僅 設(shè)置list-style:none,并不足以解決所有問(wèn)題所以我認(rèn)為在css reset的時(shí)候使用 list-style:none outside none 更好
20：鏈接去邊線（完全兼容）


21: display:inline-block 額外產(chǎn)生的6PX 或者4px margin
今天在做一個(gè)Timeline的模塊的時(shí)候遇到一個(gè)棘手的問(wèn)題： 給元素添加display:inline-block 屬性的時(shí)候會(huì)產(chǎn)生額外的4px的margin-right。
原始代碼


頁(yè)面渲染結(jié)果：
每一列都會(huì)向右產(chǎn)生外邊距4px，苦思不得其解，嘗試負(fù)的外邊距，但是涉及到其他的問(wèn)題:每個(gè)li標(biāo)簽會(huì)重疊1-2個(gè)px，妨礙到鼠標(biāo)hover狀 態(tài)的事件。嘗試修改doctype類型也不見(jiàn)效果。后來(lái)嘗試了另外一個(gè)方法：把原來(lái)的HTML 代碼結(jié)構(gòu)：更改為：這樣就不會(huì)產(chǎn)生額外的外邊距，也弄不清楚為什么會(huì)出現(xiàn)這種問(wèn)題。先暫時(shí)記下，以后再研究研究。
22: IE6中偽類:hover的使用及BUG
以前未曾遇到類似的問(wèn)題，一番google，才知道這是IE6處理CSS偽類:hover的Bug。例如如下的代碼：


在IE7/FF中，鼠標(biāo)移動(dòng)到鏈接上時(shí)，”淘你喜歡”字樣會(huì)變?yōu)榧t色，但I(xiàn)E6則無(wú)反應(yīng)。所以IE6的bug就是如果a 與 a:hover 的css定義是一樣的，也就是說(shuō)如果a:hover 中沒(méi)有樣式的改變，hover就不會(huì)被觸發(fā)。但如果在a:hover{}增加一些特定的屬性，例如


此時(shí)hover就可以觸發(fā)了。
23：原來(lái)IE6支持!important


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


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%是相對(duì)于上有高度設(shè)置的元素 其他瀏覽器是相對(duì)于上個(gè)相對(duì)定位或絕對(duì)定位的元素


27： ie不緩存背景圖片的解決辦法
高性能web開(kāi)發(fā)中，一張小小的圖片請(qǐng)求能省的就省，可IE6存在不緩存背景圖的bug.如果重復(fù)使用了一個(gè)圖片作為背景，那么每用一次就會(huì)重新去服務(wù)器拉一次。。。給服務(wù)器帶來(lái)巨大的壓力。解決方法有兩種，
1：采用JS


2.在頁(yè)面上直接使用1個(gè)DIV元素來(lái)加載該圖片，這樣加載圖片就能真正被緩存，鼠標(biāo)移動(dòng)也不會(huì)發(fā)送請(qǐng)求了。
28:ie6下css實(shí)現(xiàn)max/min-width/height


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


這是一個(gè)div元素內(nèi)嵌套p的簡(jiǎn)單樣例,先別復(fù)制保存為html測(cè)試,在你看完上面的代碼后,你是否以為它出為你呈現(xiàn)如下圖的效果?
好,現(xiàn)在你可以復(fù)制上面代碼,保存到本地,然后在瀏覽器中打開(kāi).你會(huì)驚訝的發(fā)現(xiàn),它呈現(xiàn)給你的效果是這樣的:
為什么會(huì)這樣呢?按CSS中,對(duì)于有塊級(jí)子元素的元素計(jì)算高度的方式,如果元素沒(méi)有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離.故,子元素的頂部和底部空白邊就突出到元素的外圍了.p元素的15px外邊距與div元素的10px的外邊距形成一個(gè)單一的15px垂直空白邊,另外,形式的這個(gè)空白邊并非為div所包圍,而是呈現(xiàn)在div的外圍.所以,我們看到了第二張效果圖.
如何解決?本人比較推薦兩種解決方式:
其一,為外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px solid #ddd;
其二,為外圍元素定義內(nèi)邊距填充..具體到本例,即在樣式div中加入padding:1px
另外,還可以通過(guò)外圍元素絕對(duì)定位,或者定義子元素浮動(dòng)等方式實(shí)現(xiàn).
30：純css解決多行文字垂直居中


其大概原理為：第一個(gè)alert_blank容器，display:inline以后作為行內(nèi)元素，它的高度為100%，寬度卻為0，相當(dāng)于緊貼外層容器左邊框的一條透明的線，這樣就使得外層容器里面只存在一行。外層容易的vertical-align:middle使得其內(nèi)部相當(dāng)于一行文字垂直居中。真正盛放內(nèi)容的div也是display:inline，它對(duì)外和blank垂直居中，只要內(nèi)部文字不超過(guò)blank的高度，這個(gè)效果將是完美的。雖然從語(yǔ)義化上講，用空白div布局說(shuō)不太過(guò)去，但是瑕不掩瑜。另：zoom:1是為了觸發(fā)hasLayout。
31:關(guān)于flash遮蓋div浮動(dòng)層
(a) place Flash embed script in <div> container (I use SWFObject.js)[將flash嵌入腳本放到一個(gè)div容器中]
(b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入腳本]
(c) set <div id="flashcontent"> container with z-index:-1; [將外層容器的z-index設(shè)置為-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;[將浮動(dòng)的iframe在容器中的zindex設(shè)置為99]
(f) use CSS to position flashcontent and htmlcontent containers.[使用css來(lái)調(diào)整flash容器和html容器的位置]
其他方案網(wǎng)上比較多見(jiàn),不做闡述.在此說(shuō)下使用第一個(gè)方案如何解決:
var so = new SWFObject("XXX.swf", "flashId", "寬度", "高度", "版本", "背景色");
//設(shè)置flash不遮蓋div層
so.addParam("wmode", "opaque");
so.write("flashcontent");
如此設(shè)置即可讓flash無(wú)法遮蓋住div
32:如何處理ie6的文字行高
ie6下漢字就會(huì)顯示偏上位置，而在標(biāo)準(zhǔn)瀏覽器中不存在這個(gè)問(wèn)題字體 Tahoma,試下
不過(guò)如果有規(guī)定第一個(gè)字體是用啥的，那就只能忽略這個(gè)問(wèn)題..我終于明白淘寶為啥把Tahoma字體放到第一位了


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


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


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

最新評(píng)論