?
?? ? 1、png圖片在IE6下出現(xiàn)透明或背景變灰的bug;
分析： ?? ? 隨處可見(jiàn)，遇到時(shí)就想好策略。
解決方法： 1、使用濾鏡，語(yǔ)法如下
?? ? ? ? ? ? ? ? ? .image-style { background-image: none;
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?filter:progid: DXImageTransform .Microsoft. AlphaImageLoader (src="filename.png", sizingMethod="scale");
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
?? ? ? ? ? ? ? ? 注意：使用濾鏡需要性能損耗。
?? ? ? ? ? ? ?2、給IE6單獨(dú)制作一張.gif圖片，打上hack
?? ? ? ? ? ? ? ? ?.image-style{ background:transparent url("filename.png") no-repeat scroll 0 0;
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _background-image:url("filename.gif");
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
?? ? ? ? ? ? ? ? ?這種方法只需要在切圖時(shí)多存儲(chǔ)一份.gif格式的圖片，一般采用這種方法。
?? ?2、position:absolute定位在IE6下存在left和bottom相對(duì)最外層視窗（body）定位的bug:
分析： ??由于在IE6下，相對(duì)定位的元素沒(méi)有獲得IE內(nèi)部的haslayout屬性，因此不創(chuàng)建新的定位上下文，所以絕對(duì)定位的元素相對(duì)于視口進(jìn)行定位。
解決方法： 1、設(shè)置height：1%；//小的高度不會(huì)對(duì)實(shí)際高度找出影響
?? ? ? ? ? ? ?2、相對(duì)定位的祖先元素設(shè)置過(guò)高度和寬度。
?? ? ? ? ? ? ?3、相對(duì)定位的祖先元素設(shè)置_zoom:1,用于觸發(fā)元素的layout屬性。
3、IE6下border不顯示的bug
分析： 對(duì)一個(gè)div定義border，但是卻不顯示。
解決方法 ：定義寬度；定義高度；清除浮動(dòng)。
??4、在 W3C 規(guī)范中? position ?是可以使用在任何元素上的，但table元素的 position:relative 卻有例外：
?
The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell,?
and table-caption elements is undefined.
分析 ：經(jīng)測(cè)試，在瀏覽器（IE 除外）中給 table 定義 position:relative 屬性是無(wú)效的。如果的確需要在表格中使用該屬性，建議在單元格中嵌套一個(gè) div 元素，再在其上設(shè)置 position:relative 屬性來(lái)模擬。
?5、IE6下overflow:hidden失效bug
分析 ：在開(kāi)發(fā)中經(jīng)常使用overflow:hidden來(lái)清除浮動(dòng)，也就是在浮動(dòng)元素的父元素中使用這個(gè)屬性，就相當(dāng)于添加了一個(gè)clear元素。但是，這在IE6下不給力。
解決方法 ：只要在父元素中給定一個(gè)寬度就可解決這個(gè)bug；
6、IE6下的雙空白邊浮動(dòng)bug
分析 ：這是一個(gè)常見(jiàn)的出名BUG，給IE6下的浮動(dòng)元素定義margin-left或者margin-right，實(shí)際上是數(shù)值的兩倍。
解決方法： 把這個(gè)浮動(dòng)元素設(shè)置為display:inline;
7、IE6下float元素如果沒(méi)有定義寬度，在浮動(dòng)時(shí)它會(huì)自動(dòng)占滿(mǎn)一行的bug
分析：即使對(duì)這個(gè)浮動(dòng)元素內(nèi)部的元素設(shè)置了寬度，也是無(wú)效的
解決方法：一般用于布局的浮動(dòng)元素不會(huì)要求橫向可自由拓展的，那么可以通過(guò)設(shè)置寬度來(lái)解決這個(gè)bug.
8、IE6下img元素底部留白的bug
分析 ：代碼結(jié)構(gòu)如下
?? ? ? ? <div>
?? ? ? ? ? ? ? ? ? <img src="filename" alt="圖片" />
?? ? ? ? </div>
解決方法 ：把代碼結(jié)構(gòu)改成如下：
?? ? ? ? ?<div><img src="filename" alt="圖片" /></div>
?? ? ? ? ? 并設(shè)置img元素的display:block（img元素默認(rèn)是一個(gè)display:inline的元素）
9、IE6 7下的浮動(dòng)元素的父元素在拖動(dòng)滾動(dòng)條時(shí)出現(xiàn)的邊框缺失bug
解決方法 ：設(shè)置zoom，使元素獲得布局。
10、?IE（6 7 8） 的 z-index bug?
分析 ：看代碼
< div? id ="box1" > 這個(gè)box應(yīng)該在上面 </ div >
</ div >
< div? id ="box2" >
這個(gè)box應(yīng)該在下面，IE瀏覽器會(huì)對(duì)定位元素產(chǎn)生一個(gè)新的stacking
context ，甚至當(dāng)元素 z-index的為“auto”。
</ div >
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; }
結(jié)果： ff/chrome顯示為box1在box2上，而IE確實(shí)box2顯示在了box1上
原因： IE瀏覽器會(huì)對(duì)定位的元素產(chǎn)生一個(gè)新的stacking context，并且從z-index:0開(kāi)始
11、關(guān)于IE8的一些資料
12、IE6下的重復(fù)字符bug
分析： 如下圖所示
出現(xiàn)這個(gè)BUG的“機(jī)遇“其實(shí)并不大，要滿(mǎn)足以下一個(gè)或者多個(gè)條件：
1.父元素的內(nèi)部有多個(gè) 浮動(dòng) 元素。
2. 最后一個(gè)浮動(dòng)元素前有隱藏元素：包括html 注釋 和display： none 的元素
3.子元素的寬度和父元素相同，父元素的寬度減去子元素寬度 小于3px
最終得出的結(jié)論是： 溢出文字的字?jǐn)?shù)=注釋的條數(shù) *2-1
這個(gè)變態(tài)BUG的最早文獻(xiàn)是出現(xiàn)在2004年， 這里可見(jiàn) 。
解決方法：
1.把浮動(dòng)的子元素加上display:inline;屬性（推薦）
2.去掉注釋和所有隱藏元素（缺點(diǎn)：特殊情況下不一定可以刪除）
3.?把浮動(dòng)的子元素加上margin-right:-3px;屬性（缺點(diǎn)：要加IE6的hack，也算是好方法）
4.在隱藏的DIV外嵌套一個(gè)DIV（缺點(diǎn)：增加的結(jié)果復(fù)雜性）
詳解： http://www.cnblogs.com/javashi/archive/2010/05/08/1730504.html
13、IE6下的空div bug
分析： 通常在實(shí)現(xiàn)可拓展的圓角框時(shí)，習(xí)慣在頭尾使用兩個(gè)空元素來(lái)放置背景圖片如<div class="hd"></div>，但是這個(gè)空元素在IE6下會(huì)莫名的產(chǎn)生一個(gè)高度，為原先定義的2倍。代碼如下：
<div class="hd"></div>
<div class="bd">content</div>
<div class="ft"></div>
樣式：
.hd{background:url("filename") transparent ...; height:5px;}
解決方法： 為這個(gè)空元素設(shè)定line-height:0;font-size:1px;即可解決這個(gè)bug。
14、IE6下對(duì)position：fixed不支持的bug
分析：?jiǎn)栴}的原因是IE6下的fixed元素絕對(duì)定位位置是針對(duì)html元素的，而滾動(dòng)條則是針對(duì)body元素的
解決方法：
.fixed{_postion:absolute;expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight))}//底部
expression(eval(document.documentElement.scrollTop));/*頭部*/
expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop-80));/*右側(cè)*/
15、IE6下input/textarea/select元素繼承父元素的水平margin的bug
分析： http://haslayout.net/css/Form-Control-Double-Margin-Bug
解決方法：這個(gè)bug在開(kāi)發(fā)中是經(jīng)常遇到的，解決方法就是在input或者textarea元素上使用負(fù)的margin，使元素重新布局。
16、IE6不支持min-height/max-height/min-width/max-width的bug
分析：無(wú)
解決方法：根據(jù)IE6的特性模擬出來(lái)
min-height: x px; /* 需要的最小高度 */
height: x px
17、IE6下position：relative的bug
分析：在IE6下父層（或者上層）設(shè)置為position:relative且沒(méi)有寫(xiě)寬度,而這個(gè)元素又被一個(gè)帶有滾動(dòng)條overflow：auto/scroll屬性包含的時(shí)候，它將會(huì)表現(xiàn)出absulute，并且在鼠標(biāo)移上去時(shí)，會(huì)在整個(gè)屏幕上滑動(dòng)；
解決方法：找到了bug的原因后，事情就變得簡(jiǎn)單了，方法有兩種
???????????? 1、把父層（或者更上層）的relative刪掉，但有時(shí)候這個(gè)relative是必須的，那就只能用第二種方法了；
???????????? 2、不刪除relative，但給這個(gè)元素設(shè)定一個(gè)寬度，可以是100%。
18、IE6下樣式不表現(xiàn)
分析：通常一個(gè)頁(yè)面需要載入2-3個(gè)樣式文件，但其中有某個(gè)樣式文件里的樣式完全不表現(xiàn)，你或許懷疑這個(gè)文件沒(méi)有被加載，這個(gè)時(shí)候打開(kāi)IE Debug看文件的傳輸情況，很清晰的看到文件正常加載了，納悶吧！后來(lái)找到了
??????? 原因，主要有兩個(gè)：
??????? 1、這個(gè)文件的編碼和頁(yè)面定義的character編碼不一致；
??????? 2、不正確的注釋?zhuān)ㄟ@個(gè)也有可能是頁(yè)面編碼不正確，而注釋是中文導(dǎo)致的）
解決方法：檢查頁(yè)面編碼；去掉注釋?zhuān)?
19、IE6浮動(dòng)元素與非浮動(dòng)元素間隔的3pxbug
分析：在IE下，一個(gè)浮動(dòng)元素與一個(gè)非浮動(dòng)元素相鄰時(shí)候，中間會(huì)莫名的出現(xiàn)一個(gè)3px的間隔。
解決方法：1、由于明確知道是3px，所以可以使用負(fù)的margin，但是由于IE下不同的盒模式，又會(huì)導(dǎo)致寬度上的不同，浮動(dòng)元素的寬度如果超出了父元素的寬度在IE下是會(huì)有bug的，所以不建議使用這種方法。
????????????? 2、不讓浮動(dòng)元素和非浮動(dòng)元素相鄰，或者把非浮動(dòng)元素也設(shè)置為浮動(dòng)元素。
20、IE6下img元素底部出現(xiàn)5px的空白間隙bug
分析：
??? 代碼結(jié)構(gòu)如下：
?? 在ie6下會(huì)出現(xiàn)5px的空白。
解決方法：
ul li { display : block ; font-size : 0 ; }
img { vertical-align : bottom ; }
2、img { _margin-bottom : -5px ; }
21、IE下透明度無(wú)效bug
分析：在IE的所有版本中，父元素設(shè)置了透明度，而子元素如果有position：relative/absolute時(shí)，子元素?zé)o法繼承父元素的透明度。
??????? 找了一些資料：http://younglab.blog.51cto.com/416652/431363
解決方法：除了資料中使用的方法（觸發(fā)layout），還有個(gè)土方法，那就是在透明度比較小的區(qū)域中，使用具有透明度的圖片和字體模糊。
22、IE下overflow：auto/scroll不起作用的bug
分析：在IE下overflow不起作用，但是在火狐下是正常顯示的，IE下overflow如同虛設(shè)，內(nèi)容是表現(xiàn)出來(lái)了，但是確實(shí)在區(qū)域的下面顯示，滾動(dòng)條也無(wú)法使用。
解決方法：對(duì)設(shè)置了overflow的元素設(shè)定高度和寬度（一般使用滾動(dòng)條的都會(huì)設(shè)置這些屬性），然后給這個(gè)元素 進(jìn)行position定位 ，relative或者absolute都是可以的
23、IE6 7 8下元素重疊bug
分析：頁(yè)面操作過(guò)程中對(duì)一組li元素做remove（）或者h(yuǎn)ide（）時(shí)，被移除的li的下一個(gè)兄弟元素會(huì)往下偏移，從而發(fā)生元素重疊。
解決方法：js中對(duì)這個(gè)li元素的父元素加上toggleClass("ie-hack");//ie-hack為不存在的class。
????????????? 原因不明。
24、IE6/7/8下直接對(duì)input輸入框使用背景圖片，當(dāng)輸入值沖出背景圖片寬度時(shí)，背景圖片會(huì)隨字符滑動(dòng)
解決方法：在input框外加一個(gè)div，在這個(gè)div上設(shè)置背景
25、去掉a鏈接難看外框的方法：
IE下設(shè)置hideFocus=true,其他瀏覽器設(shè)置：outline:none
即
a {
outline : none
}
還有一種是用expression的方法，但是耗性能，原因是每秒鐘執(zhí)行了很多次。不推薦是用
a{
blr:expression(this.onFocus=this.blue())
}
26、去除鏈接a點(diǎn)擊后產(chǎn)生的難看虛線(xiàn)框
a{text-decoration:none;color:#374257;blr:expression(this.onFocus=this.blur());}//IE
a:focus{outline:none;}//ff
|
|
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
