在處理IE方面每個(gè)人都有他們自己的故事。作為一個(gè)開發(fā)者我不得不面對(duì)大量的IE的古里古怪的問題并且有的時(shí)候你只是想用頭撞墻。但是隨著時(shí)間的推移，我們慢慢吃一塹長(zhǎng)一智（有些時(shí)候那不是我們的錯(cuò)，是IE的錯(cuò)�。┎⑶议_始接受和理解IE的怪異行為。我們不得不這樣因?yàn)槿匀挥袛?shù)量可觀的IE6用戶。最好的做法是一開始就不斷的從不同的瀏覽器測(cè)試你的網(wǎng)站。從一開始就解決布局問題要比在數(shù)千行html和css代碼之后容易的多。
有很多運(yùn)動(dòng)在抗議IE6，支持它的是大多數(shù)web專家和看起來不怎么關(guān)心的普通用戶。所以，我們現(xiàn)在能做什么？我們不得不繼續(xù)挖掘來解決IE6的問題。但是，等一下，有一個(gè)振奮人心的消息�；趙3cschool的月度報(bào)表，IE6的用戶這些年已經(jīng)減少了一些。從2006年6月的60.3%到現(xiàn)在2009年9月的13.6%。按照這種比例，我們應(yīng)該能在2010年年底的時(shí)候放棄IE6(譯注：國(guó)外的情況還真是一片大好啊~。~)
好了，回到現(xiàn)實(shí)，我已經(jīng)列出了全部我之前遇到的問題作為未來參考的列表。我相信這將能夠幫助你減少調(diào)試IE布局不一致時(shí)花掉的時(shí)間。
1、IE6 幽靈文本(Ghost Text bug)
在我寫本文之前，我遇到了這個(gè)bug。它相當(dāng)?shù)墓殴趾突�。一塊不知哪來的重復(fù)的文本，被IE6顯示在靠近原文本的下面。(譯注：也可以參看 Explorer 6 Duplicate Characters Bug 獲得bug演示)。我無法解決它，所以我搜索它，果然，這是另一個(gè)IE6的bug。
對(duì)此有許多解決方法，但是沒有一個(gè)對(duì)我的例子有效(因?yàn)榫W(wǎng)站的復(fù)雜性我無法使用其中的一些方法)。所以我使用了hack。在原文本之后增加空格看起來能解決這個(gè)問題。
但是，從 Hippy Tech Blog 那里了解到，問題背后的原因是由于html注釋標(biāo)簽。IE6不能正確的渲染它。下面是他建議的解決方案列表：
解決方法：
2、相對(duì)位置和溢出隱藏(Position Relative and Overflow Hidden)
這個(gè)問題我遇到過很多次，當(dāng)時(shí)我正在準(zhǔn)備一個(gè)JQuery的教程，因?yàn)槲沂褂昧撕芏鄌verflow hidden來達(dá)到我想要的布局。
問題發(fā)生在當(dāng)父元素的overflow被設(shè)置成hidden并且子元素被設(shè)置成position:relative。
CSS-Trick有一個(gè)很好的例子來演示這個(gè)bug。position:relative and overflow in internet explorer
解決方法：
為父元素增加position:relative;
3、IE的最小高度(Min-Height for IE)
這很簡(jiǎn)單，IE忽略min-height屬性。你可以用下面的hack來修復(fù)它。感謝Dustin Diaz。
這個(gè)解決方法在IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2里都工作的很好。
解決方法：
| selector { min-height:500px; height:auto !important; height:500px; } |
4、Bicubic圖像縮放(Bicubic Image Scaling)
你會(huì)喜歡這個(gè)的。IE那糟糕圖像縮放讓你很困擾？如果你拿IE和其他瀏覽器比較，IE縮小的圖像看起來不如其他瀏覽器。
解決方法：
|
img { -ms-interpolation-mode: bicubic; } |
5、 PNG透明(PNG Transparency)
我猜每個(gè)人都知道這個(gè)，但我仍把它列在這里，作為以后的參考。
所以如果你想要使用透明圖像并且GIF不能給你想要的質(zhì)量，你會(huì)需要這個(gè)對(duì)PNG的hack。你必須意識(shí)到，如果你使用一張PNG圖像作為背景，你將不能設(shè)置背景的位置。
解決方法：
| img { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); } |
6、 IFrame透明背景 (IFrame Transparent Background)
在firefox和safari里你應(yīng)該不會(huì)遇到這個(gè)問題因?yàn)槟J(rèn)情況下，iframe的背景被設(shè)置為transparent，但是在IE里，卻不是如此。你需要用到allowTransparency 屬性并且加入下面的CSS代碼來達(dá)成目的。
解決方法：
|
/* in the iframe element */ /* in the iframe docuement, in this case content.html */ |
7、禁用IE默認(rèn)的垂直滾動(dòng)條(Disabled IE default Vertical Scroll bar)
默認(rèn)情況下，即使內(nèi)容適合窗口大小，IE(譯注：IE6/7)也會(huì)顯示垂直滾動(dòng)條。你可以使用overflow:auto，讓滾動(dòng)條只在你需要時(shí)出現(xiàn)。
| html { overflow: auto; } |
8、:hover偽類(:hover Pseudo Class)
IE只支持<a>元素的 :hover偽類。你可以使用jQuery的hover event來達(dá)到相同效果。
解決方法：
|
/* jQuery Script */ function () { function() { /* CSS Style */ /* HTML */ |
9、盒模型Hack(Box Hack Model)
這是IE里最熱門的bug了�；镜睦斫馐�，IE計(jì)算寬度(width)的方式不同。基于w3c標(biāo)準(zhǔn)，一個(gè)元素總寬度應(yīng)該是：
總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是，IE計(jì)算寬度時(shí)沒有加上填充和邊框：
總寬度 = margin-left + width + margin-right
更多的細(xì)節(jié)，請(qǐng)參考這個(gè)鏈接：Internet Explorer和CSS盒模型詳細(xì)解釋
解決方法：
使用w3c的標(biāo)準(zhǔn)兼容模式。IE6或者之后的版本能基于w3c的標(biāo)準(zhǔn)計(jì)算，但是你仍舊會(huì)在IE5中遇到問題。
或者你可以用CSS Hack來解決這個(gè)問題。所有標(biāo)準(zhǔn)兼容的瀏覽器都能讀取w\\idth:180px 除了IE5。
| #content { padding:10px; border:1px solid; width:200px; w\\idth:180px; } |
10、 雙倍邊距bug(Double Margin Bug Fix)
如果你有一個(gè)分配有左/右邊距的浮動(dòng)元素，IE6會(huì)使得邊距雙倍化。比如，margin-left:5px 將會(huì)變成10px。你可以通過對(duì)浮動(dòng)元素添加display:inline來解決這個(gè)問題。
解決方法：
|
div#content { /* fix the double margin error */ |
渝公網(wǎng)安備 50024202000196號(hào)
域名注冊(cè)知識(shí)
虛擬主機(jī)知識(shí)
網(wǎng)站建設(shè)知識(shí)
網(wǎng)絡(luò)推廣知識(shí)
網(wǎng)絡(luò)營(yíng)銷知識(shí)
常見技術(shù)問題
QQ空間
新浪微博
開心網(wǎng)
人人網(wǎng)