斷斷續(xù)續(xù)的在開發(fā)過程中收集了好多的bug以及其解決的辦法帮哈，都在這個文章里面記錄下來了备韧！希望以后解決類似問題的時候能夠快速解決

，也希望大家能在留言里面跟進自己發(fā)現(xiàn)的ie6 7 8bug和解決辦法怕轿！

1：li邊距“無故”增加

任何事情都是有原因的肄满，li邊距也不例外。

先描述一下具體狀況：有些時候li邊距會突然增?加很多智政，值也不固定（只在IE6/IE7有這種現(xiàn)象）认罩，讓人摸不著頭腦，仔細“研究”發(fā)現(xiàn)是由于其低級元素ul的padding引?起女仰，padding的上下值對li有影響猜年，左右無影?響。所以只好笨手笨腳地把padding去掉疾忍，換成margin乔外。這是能解決問題，但往往不是我們想要的結(jié)果一罩，或許?還會引起其他不必要的怪現(xiàn)象杨幼。

現(xiàn)在終于發(fā)現(xiàn)解決這個問題的方法，其實很簡單聂渊，既然是有ul引?起的差购，就設(shè)置ul的顯示形式為*display:inline-block;即可，前面加*是只?針對IE6/IE7有效汉嗽，其他瀏覽器并不渲染這個屬性欲逃。

2：分頁數(shù)字?字體用“Arial?”加粗不抖動

無標(biāo)題文檔

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;

}

分頁樣式

?1?2?3?4?5

6?7?8?9?10?

3：IE6?CSS選擇器區(qū)分IE6

IE6不支持子選擇器；先針對IE6使用常規(guī)申明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是一個非常惱人的問題井辆。一個撐破了容器的浮動元素，如果在他之后有不浮動的內(nèi)容画髓，并且有一

些定義了:hover的鏈接掘剪，當(dāng)鼠標(biāo)移到那些鏈接上時，在IE6下就會觸發(fā)躲貓貓奈虾。

解決方法很簡單：

1.在（那個未浮動的）內(nèi)容之后添加一個?

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

7:IE6絕對定位元素的1像素間距bug

IE6下的這個錯誤是由于進位處理誤差造成（IE7已修復(fù)）廉赔，當(dāng)絕對定位元素的父元素高或?qū)挒槠鏀?shù)時肉微，bottom和right會

產(chǎn)生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值蜡塌，但對于液態(tài)布局沒有完美的解決方法碉纳。

8:?IE下z-index的bug

在IE瀏覽器中，定位元素的z-index層級是相對于各自的父級容器馏艾，所以會導(dǎo)致z-index出現(xiàn)錯誤的表現(xiàn)劳曹。解決方法是給

其父級元素定義z-index，有些情況下還需要定義position:relative琅摩。

9:?Overflow?Bug

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

position:relative;房资。

10:?橫向列表寬度bug

如果你使用float:left;把

表現(xiàn)轰异。解決方法很簡單岖沛，只需要給定義同樣的float:left;即可。

11:?列表階梯bug

列表階梯bug通常會在給

但IE卻可能呈現(xiàn)出垂直的或者階梯狀。解決辦法就是給

display:inline;也可以解決唉俗。

12:?垂直列表間隙bug

當(dāng)我們使用

解決方法：把flaot并且清除float來解決這個問題互躬；另外一個辦法就是觸發(fā)的hasLayout（如定?義高寬、

使用zoom:1;）颂郎；也可以給

本末尾添加一個空格乓序。

13:?IE6調(diào)整窗口大小的?Bug

當(dāng)把body居中放置寺酪，改變IE瀏覽器大小的時候坎背，任何在body里面的相對定位元素都會固定不動了。解決辦法：

給body定義position:relative;就行了寄雀。

14:?文本重復(fù)Bug

在IE6中得滤，一些隱藏的元素（如注釋、display:none;的元素）被包含在一個浮動元素里盒犹，就有可能引發(fā)文本重復(fù)bug懂更。

解決辦法：給浮動元素添加display:inline;。

15：鏈接a的title屬性中的文字換行

啥也不說急膀，先上個圖

我們都知道沮协，可以給鏈接a加上title屬性，這樣鼠標(biāo)移動上去會顯示title屬性定義的?文字卓嫂，常常用來加一些提示語句慷暂，

比如說點擊查看詳情之類的，代碼形如：

鏈接xx

晨雳。之前一直沒有仔細注意過這個東西行瑞。如果鼠標(biāo)浮動上去要顯示更多東西的話，怎么實現(xiàn)呢餐禁。第一?反應(yīng)是jquery的tooltip插件血久。今天無意中發(fā)現(xiàn)某個學(xué)院的網(wǎng)站鼠標(biāo)移動上去可以顯示這么完整的信息，效果看起來似乎還可以坠宴，就想看看怎么做的洋魂，?找了下，沒發(fā)現(xiàn)有Javascript腳本喜鼓，再往鏈接的地方一看副砍，終于讓我發(fā)現(xiàn)了門道了：

發(fā)布日期:?2010-5-31?16:05:08 類別：院務(wù)通知 點擊:?139">

[05-31]??關(guān)于對我校2006年至2009年發(fā)展黨員工作情況進…

注意到了嗎。庄岖。很簡單豁翎，只要使用 這樣的轉(zhuǎn)義符號,即可實現(xiàn)換行。在一些tooltip要求定制性不高的情況下隅忿，這樣的顯示效果相?當(dāng)不錯心剥，而且是瀏覽器原生的效果，安逸背桐。

哎优烧，雖然號稱精通div+css，但是發(fā)現(xiàn)一些小小但是很實用的技巧自己還不知道链峭，看來html還有很多東西可以挖掘畦娄。

16：如何去掉點擊鏈接時的虛線

解決方案1：在

解決方案2：在標(biāo)簽中加入?hidefocus?Mike?blog

解決方案3:?如果連接太多，可以用外部鏈接?.HTC?文件。如熙卡，blur.htc

文件內(nèi)容如下：

onevent="makeblur()">

function?makeblur(){

this.blur();

}

在?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結(jié)構(gòu):

style="border-collapse:collapse;">

?

?

?

?

?

?

18：IE6?下z-index無效

在CSS中，通過z-index這個屬性改變層級颓鲜，要讓z-index起作用有個前提表窘，就是元素的position屬性要?是relative，absolute或是fixed灾杰。

z-index層級越高蚊丐，內(nèi)容越應(yīng)該在上面顯示。在大部分的瀏覽器在大部分的情況下艳吠，確實如此，但是不絕對孽椰，尤其遇到IE6昭娩。

1、關(guān)于效果截圖的些必要說明

下面的不是廢話黍匾，是為了更容易的理解我下面唾沫橫飛的內(nèi)容栏渺。

以下所有結(jié)果截圖的大背景如下：

1、頁面上固定不動的锐涯，一成不變的磕诊，送豪宅也不會從良的是一個黑色背景，透明度?40%纹腌，幾乎滿屏顯示的層級為1的絕對定位層霎终。HTML為：

對應(yīng)CSS為：#blank{width:100%;?height:600px;?background:black;?opacity:0.4;?filter:alpha(opacity=40);?position:absolute;?left:0;?top:0;z-index:1;}

作用是為了讓層級關(guān)系一目了然∩恚看：

這說明內(nèi)容在z-index為1的絕對定位層之下莱褒。

這說明內(nèi)容在z-index為1的絕對定位層之上。

2涎劈、頁面上做對比的是美女圖片广凸，圖片在半透明黑色絕對定位層的上面還是下面很容易辨別，這樣蛛枚，您就能夠?qū)ξ宜f的z-?index不起作用有很直觀的認識了谅海。

2、IE6的抱怨：浮動讓我沉淪

現(xiàn)在開始真正的講述?問題的產(chǎn)生蹦浦，原因以及解決了扭吁。首先講講第一種z-index無論設(shè)置多高都不起作用情況。這種情況發(fā)生的條件有三個：1、父標(biāo)簽?position屬性為relative智末；2谅摄、問題標(biāo)簽無position屬性（不包括static）；3系馆、問題標(biāo)簽含有浮動(float)屬性送漠。

您?可以拿下面的代碼自己做個簡單測試：

丫的，這z-index都9999了由蘑，層級夠高吧闽寡，但是，看下面的圖：

這一對比就知道問題了尼酿，可能有人會疑問爷狈，這會不會是IE6的relative自己感冒了，而不是浮動(float)攜帶?了“甲流病毒”裳擎。好涎永，我現(xiàn)在去掉浮動，HTML代碼如下：

結(jié)果IE6下：

我想鹿响，問題應(yīng)該都清楚了羡微，至于原因，我起初以為是haslayout搞的鬼惶我，后來妈倔，用zoom一測試，發(fā)現(xiàn)不是（IE7?下無此bug也證明不是?haslayout的原因）绸贡，似乎就是這個float會讓z-index失效盯蝴。由于將外部div的position:relative屬性改為?absolute可以解決這一問題，我就懷疑是不是浮動讓relative發(fā)生了些變化听怕，float與relative在水平定位上可以說是近親捧挺，會不會?是因為這兩者攪和在一起所以什么“畸形”“體弱多病”就出現(xiàn)了。這僅是我的猜測而已叉跛，真正的原因還是去問IE6的后媽吧松忍。

解決方法，解決方法有三筷厘，1鸣峭、position:relative改?為position:absolute；2酥艳、去除浮動摊溶；3、浮動?元素添加position屬性（如relative充石，absolute等）莫换。

3、固執(zhí)的IE6：它只認第一個爸爸

可能不少人知?道，這IE6下拉岁，層級的高低不僅要看自己坷剧，還要看自己的老爸這個后臺是否夠硬。用術(shù)語具體描述為：

父標(biāo)簽position屬性為relative?或absolute時喊暖，子標(biāo)簽的absolute屬性是相對于父標(biāo)簽而言的惫企。而在IE6下，層級的表現(xiàn)有時候不是看子標(biāo)簽的z-index多高陵叽，而要看它?們的父標(biāo)簽的z-index誰高誰低狞尔。

有一定經(jīng)驗的人可能都知道上面的事實。但是巩掺，相信這里面很多人不知道IE6下偏序，決定層級高低的不是當(dāng)前的父標(biāo)簽，而是整?個DOM?tree（節(jié)點樹）的第一個relative屬性的父標(biāo)簽胖替。有時平時我們多處理一個父標(biāo)簽研儒，z-index層級多而復(fù)雜的情況不多見，所以難免會有認識上?的小小偏差独令。

好殉摔，下面展示這個bug。

條件很簡單记焊，只要絕對定位的第一個元素的第一個爸爸，或者說是最老的那個爸爸級別的人的relative屬性小于黑色半?透明層的z-index層級栓撞。例如下面的HTML代碼：

z-index:1000;">

可以看到遍膜，mm3圖片的父標(biāo)簽div?是絕對定位，層級9999瓤湘，比1大多了瓢颅，絕對定位的父標(biāo)簽層級1000(10000也一樣)，也比黑色半透明層的z-index:1大多了弛说，但是挽懦，我們可?憐的IE6童鞋——

再看看以Firefox為代表的其他童鞋：

IE7與IE6有著同樣的bug，原因很簡單木人，雖然圖片所在div當(dāng)前的老爸層級很高(1000)信柿，但是由于老爸的老爸?不頂用，可憐了9999如此強勢的孩子沒有出頭之日靶训凇渔嚷！

知道原因解決就很輕松了，給第一任老爸添加z-index后的HTML代?碼如下：

結(jié)果IE6童鞋喜笑顏開稠曼，春光燦爛：

19：css?reset中的list-style:none

在IE6,7下,當(dāng)UL不具有float:left;display:inline;時:

無論有沒有list-style:none這個屬性,列?表符都被隱藏,不占位置(下面代碼中的5,6)

當(dāng)UL具有float:left;display:inline;屬性時

list-?style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);

未?設(shè)置list-style:none;列表符被隱藏,也不占位(list-style-position:outside)

在firefox中只要list-style-type為none?,則?無論list-stype-position的值為outside或inside?,?list-style都能很好的被隱藏

而在IE6,7中,僅?設(shè)置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?額外產(chǎn)生的6PX?或者4px?margin

今天在做一個Timeline的模塊的時候遇到一個棘手的問題：?給元素添加display:inline-block?屬性的時候會產(chǎn)生額外的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;

}

頁面渲染結(jié)果：

每一列都會向右產(chǎn)生外邊距4px，苦思不得其解，嘗試負的外邊距漠吻，但是涉及到其他的問題:每個li標(biāo)簽會重疊1-2個px量瓜，妨礙到鼠標(biāo)hover狀?態(tài)的事件。嘗試修改doctype類型也不見效果途乃。后來嘗試了另外一個方法：

把原來的HTML?代碼結(jié)構(gòu)：

更改為：

這樣就不會產(chǎn)生額外的外邊距绍傲，也弄不清楚為什么會出現(xiàn)這種問題。先暫時記下欺劳，以后再研究研究唧取。

22:?IE6中偽類:hover的使用及BUG

以前未曾遇到類似的問題，一番google划提，才知道這是IE6處理CSS偽類:hover的Bug枫弟。例如如下的代碼：

a?{color:?#333;}

a?span?{color:?green;}

a:hover?{}

a:hover?span?{color:?red;?}

http://www.taobao.com“>?淘寶網(wǎng)??淘你喜歡?

在IE7/FF中，鼠標(biāo)移動到鏈接上時鹏往，”淘你喜歡”字樣會變?yōu)榧t色淡诗，但IE6則無反應(yīng)。所以IE6的bug就是如果a?與?a:hover?的css定義是一樣的伊履，也就是說如果a:hover?中沒有樣式的改變韩容，hover就不會被觸發(fā)。但如果在a:hover{}增加一些特定的屬性唐瀑，例如

a:hover{border:none;}

或者

a:hover{padding:0;}

又或者

a:hover{background:?none;}

此時hover就可以觸發(fā)了群凶。

23：原來IE6支持!important

.demo?{?color:#F00!important;?color:#000;?}/*IE6顯示錯誤理解：.demo顯示為黑色*/

/*而下面IE6是正確理解的：.demo顯示為紅色*/

.demo?{?color:#F00!important;}

.demo?{?color:#000;?}

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

*{padding:0;?margin:0}

input,button{overflow:visible;padding:0;}

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

在非ie6的瀏覽器中都是滿屏幕的紅，?說明非ie6的瀏覽器的width和height的百分比哄辣，都是相對的上個相對定位或者絕對定位的元素请梢，沒有就為html元素

，而ie6中的width和height?的百分比力穗，相對的是上個有高寬顯示設(shè)置的元素毅弧，而且height的百分比設(shè)置失效，所以上述代碼在ie6中就出現(xiàn)寬度穿越了他的父元素而遇見width:500px;的元素的時候当窗，邊把自己設(shè)置成了width:500px;而height的設(shè)置則失效够坐，?這個，?讓人很蛋疼崖面！ie6元咙，真的該早點走了！

27：ie不緩存背景圖片的解決辦法

高性能web開發(fā)中嘶朱，一張小小的圖片請求能省的就省蛾坯，可IE6存在不緩存背景圖的bug.如果重復(fù)使用了一個圖片作為背景，那么每用一次就會重新去服務(wù)器拉一次疏遏。脉课。救军。給服務(wù)器帶來巨大的壓力。解決方法有兩種倘零，

1：采用JS

var?ua?=?navigator.userAgent.toLowerCase();

var?isIE6?=?ua.indexOf("msie?6")?>?-1;//判斷是否為IE6

//?remove?css?image?flicker

//IE6下默認不緩存背景圖片唱遭，CSS里每次更改圖片的位置時都會重新發(fā)起請求，用這個方法告訴IE6緩存背景圖片

if(isIE6){

try{

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

}catch(e){}

}

2.在頁面上直接使用1個DIV元素來加載該圖片呈驶，這樣加載圖片就能真正被緩存计维，鼠標(biāo)移動也不會發(fā)送請求了蜈块。

28:ie6下css實現(xiàn)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元素內(nèi)嵌套p的簡單樣例,先別復(fù)制保存為html測試,在你看完上面的代碼后,你是否以為它出為你呈現(xiàn)如下圖的效果?

好,現(xiàn)在你可以復(fù)制上面代碼,保存到本地,然后在瀏覽器中打開.你會驚訝的發(fā)現(xiàn),它呈現(xiàn)給你的效果是這樣的:

為什么會這樣呢?按CSS中,對于有塊級子元素的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離.故,子元素的頂部和底部空白邊就突出到元素的外圍了.p元素的15px外邊距與div元素的10px的外邊距形成一個單一的15px垂直空白邊,另外,形式的這個空白邊并非為div所包圍,而是呈現(xiàn)在div的外圍.所以,我們看到了第二張效果圖.

如何解決?本人比較推薦兩種解決方式:

其一,為外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px?solid?#ddd;

其二,為外圍元素定義內(nèi)邊距填充..具體到本例,即在樣式div中加入padding:1px

另外,還可以通過外圍元素絕對定位,或者定義子元素浮動等方式實現(xiàn).

30：純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;

}

哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～

其大概原理為：第一個alert_blank容器儡陨，display:inline以后作為行內(nèi)元素煞躬，它的高度為100%，寬度卻為0聋迎，相當(dāng)于緊貼外層容器左邊框的一條透明的線脂矫，這樣就使得外層容器里面只存在一行。外層容易的vertical-align:middle使得其內(nèi)部相當(dāng)于一行文字垂直居中霉晕。真正盛放內(nèi)容的div也是display:inline庭再，它對外和blank垂直居中，只要內(nèi)部文字不超過blank的高度牺堰，這個效果將是完美的拄轻。雖然從語義化上講，用空白div布局說不太過去伟葫，但是瑕不掩瑜恨搓。另：zoom:1是為了觸發(fā)hasLayout。

31:關(guān)于flash遮蓋div浮動層

(a)?place?Flash?embed?script?in?

(b)?add?wmode=transparent?to?Flash?embed?script[增加wmode=transparent?到flash嵌入腳本]

(c)?set??container?with?z-index:-1;?[將外層容器的z-index設(shè)置為-1]

(d)?set??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設(shè)置為99]

(f)?use?CSS?to?position?flashcontent?and?htmlcontent?containers.[使用css來調(diào)整flash容器和html容器的位置]

其他方案網(wǎng)上比較多見,不做闡述.在此說下使用第一個方案如何解決:

var?so?=?new?SWFObject("XXX.swf",?"flashId",?"寬度",?"高度",?"版本",?"背景色");

//設(shè)置flash不遮蓋div層

so.addParam("wmode",?"opaque");

so.write("flashcontent");

如此設(shè)置即可讓flash無法遮蓋住div

32:如何處理ie6的文字行高

ie6下漢字就會顯示偏上位置筏养，而在標(biāo)準瀏覽器中不存在這個問題字體?Tahoma,試下

不過如果有規(guī)定第一個字體是用啥的奶卓，那就只能忽略這個問題..我終于明白淘寶為啥把Tahoma字體放到第一位了

測試ie6的文字行高表現(xiàn)

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

歲月不饒人哪

hjgt

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

在chrome下有兩像素margin

35:ie6和ie7里面margin失效

我的margin在ie里面失效了

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