IE瀏覽器下的CSS問題小結(jié)

2024-07-11 08:48:34

字體：大中小

供稿：網(wǎng)友

IE下的特殊情況
下面是14條特殊情況你看一下是哪個問題出錯了這些僅供參考：
1. 文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實際占高16px，下留白3px，ff 下實際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設定 line-height 。確保所有文字都有默認的 line-height 值。這點很重要，在高度上我們不能容忍1px 的差異。

2.ff下容器高度限定，即容器定義了height之后，容器邊框的外形就確定了，不會被內(nèi)容撐大，而ie下是會被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。

3.橫向上的撐破容器問題，。如果float 容器未定義寬度，ff下內(nèi)容會盡可能撐開容器寬度，ie下則會優(yōu)先考慮內(nèi)容折行。故，內(nèi)容可能撐破的浮動容器需要定義width。

小實驗：有興趣大家可以看看這段實驗。在不同瀏覽器下分別測試以下各項代碼。

a.<div style=”border:1px solid red;height:10px”></div> b. <div style=”border:1px solid red;width:10px”></div>

c. <div style=”border:1px solid red;float:left”></div> d. <div style=”border:1px solid red;overflow:hidden”></div>

上面的代碼在不同瀏覽器中是不一樣的，實驗起源于對小height 值div 的運用，<div style=”height:10px;overflow:hidden”></div>，小height 值要配合overflow:hidden一起使用。實驗好玩而已，想說明的是，瀏覽器對容器的邊界解釋是大不相同的，容器內(nèi)容的影響結(jié)果各不相同。

4.最被痛恨的，double-margin bug。ie6下給浮動容器定義margin-left 或者margin-right 實際效果是數(shù)值的2倍。解決方案，給浮動容器定義display:inline。

5.mirror margin bug，當外層元素內(nèi)有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。 padding也會出現(xiàn)類似問題，都是ie6下的特產(chǎn)，該類bug 出現(xiàn)的情況較為復雜，遠不只這一種出現(xiàn)條件，還沒系統(tǒng)整理。解決方案：外層元素設定border 或設定float。

引申：ff 和ie 下對容器的margin-bottom，padding-bottom的解釋有時不一致，似乎與之相關。

6. 吞吃現(xiàn)象。還是ie6，上下兩個div，上面的div設置背景，卻發(fā)現(xiàn)下面沒有設置背景的div 也有了背景，這就是吞吃現(xiàn)象。對應上面的背景吞吃現(xiàn)象，還有滾動下邊框缺失的現(xiàn)象。解決方案：使用zoom:1。這個zoom好象是專門為解決ie6 bug而生的。

7.注釋也能產(chǎn)生bug~~~“多出來的一只豬。”這是前人總結(jié)這個bug使用的文案，ie6的這個bug 下，大家會在頁面看到豬字出現(xiàn)兩遍，重復的內(nèi)容量因注釋的多少而變。解決方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法寫注釋。

8.img 下的留白，大家看這段代碼有啥問題：

<div>
<img src=”" mce_src=”" />
</div>

把div的border打開，你發(fā)現(xiàn)圖片底部不是緊貼著容器底部的，是img后面的空白字符造成，要消除必須這樣寫

<div>
<img src=”" mce_src=”" /></div>

后面兩個標簽要緊挨著。ie7下這個bug 依然存在。解決方案：給img設定 display:block。

9. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是<img />這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以嘗試去調(diào)整img 和文字讓他們在ie和ff下能一致，你會發(fā)現(xiàn)怎么調(diào)都不會讓你滿意。索性讓img 和文字都 float起來，用margin 調(diào)整。

10.clear層應該單獨使用。也許你為了節(jié)省代碼把clear屬性直接放到下面的一個內(nèi)容層，這樣有問題，不僅僅是ff和op下失去margin效果，ie下某些margin值也會失效
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>

11.ie 下overflow:hidden對其下的絕對層position:absolute或者相對層 position:relative無效。解決方案：給overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

12.ie6下嚴重的bug，float元素如沒定義寬度，內(nèi)部如有div定義了height或zoom:1，這個div就會占滿一整行，即使你給了寬度。float元素如果作為布局用或復雜的容器，都要給個寬度的。

13.ie6下的bug，絕對定位的div下包含相對定位的div，如果給內(nèi)層相對定位的div高度height具體值，內(nèi)層相對層將具有100%的width值，外層絕對層將被撐大。解決方案給內(nèi)層相對層float屬性。

14.width:100%這個東西在ie里用很方便，會向上逐層搜索width值，忽視浮動層的影響，ff下搜索至浮動層結(jié)束，如此，只能給中間的所有浮動層加width:100%才行，累啊。opera這點倒學乖了跟了ie。

ie的float bug(ie6,ie7)使前端工程師們?yōu)橹_,最常見的現(xiàn)象就是:當浮動元素的父級元素在拖動滾動條的時候出現(xiàn)邊框的缺失,對于此類問題的解決方案就是使浮動元素獲得布局.

在諸多的情況中,因為頁面需要寬度自由伸縮而不能申明寬度為固定值,但我們可以設置*height:1%;,*在這里可謂是舉足輕重,因為*只能被ie7及以下版本解析,ie8并不識別此類寫法,所以可以使用這個寫法來區(qū)別ie8和其他版本號的ie瀏覽器.對網(wǎng)上流行的ie8 beta1的hack,也算是一個補充.

一些常用的hack測試

* html p {color:red;} 支持 IE6 不支持FF IE7 IE8b
*+html p {color:red;}　　支持 IE7 IE8b 不支持FF IE6
p {*color:red;} 支持 IE7 IE6 不支持FF IE8b

IE8 中增加了 CSS3 中的子串匹配的屬性選擇器（substring matching attribute selectors），具體規(guī)則與正則中的匹配很相似：

E[att^=’val’] //子串以’val’ 開始
E[att$=’val’] //子串以’val’ 結(jié)束
E[att*=’val’] //子串中包含’val’

IE8 支持絕大多數(shù)基本的 CSS2.1 選擇器，不支持的包括但不限于：[:first-line] 、[:first-letter]。
對于 CSS2.1 中的 generated content 部分，即通過使用偽元素 :before 和 :after 添加文本內(nèi)容，IE8 中支持并未完全。
而對于幾乎在其他瀏覽器中都支持的 opacity 和 RGBA ，IE8 中依舊沒有支持。
對于原來用來區(qū)分 IE 的 HACK 在 IE8 中基本失效（比如*property:value、*property:value等）。
原有 IE 的 list-item whitespace bug 在 IE8 中依舊存在。
原有 IE 的 z-index bug 在 IE8 中依舊存在。
IE8 中產(chǎn)生新的 bug：當 line-heigth 小于正常值時，超出的部分將被裁切掉。
IE8 中依然不支持 display:table 。
IE8 中依然不支持 border 的 transparent 值。
IE8 中 @import 只支持三層嵌套。
IE8中 border的 transparent 不被支持
IE8中產(chǎn)生新的BUG：line-heigth BUG
　只針對IE8的hack，可以是屬性也可以是類

BUG描述：

頁面中某DIV使用了position:relative，結(jié)合top=-25px等元素定位。在FF和IE7下表現(xiàn)正常，但是在IE6中該DIV會隨鼠標滾動而滾動。

分析：

這是IE6一個已知的BUG：當某position:relative元素被帶有overflow:auto/scroll屬性的塊級元素包含時，會表現(xiàn)出postion:absolute的行為。

解決方法：

1.為包含塊元素添加屬性position:relative 。

2.把該元素的position:relative屬性去掉，使用默認的static定位，并通過margin-top等屬性實現(xiàn)類似的效果。

ie6的末日即將來臨,對我們前端開發(fā)人員來說,無疑是一個慰藉人心的喜訊.但這個末日也并非朝日可至,所以我們還是爭取最后的勝利,用各種 hack和方法來規(guī)避ie6下雙邊距,背景透明,重復文字等等一堆bug.下面是轉(zhuǎn)載自前端觀察(譯自www.sitepoint.com)中的10個修復ie6下bug技巧:
1. 使用DOCTYPE
你應該在一直每個HTML文件的頭部都使用DOCTYPE，并且我們推薦使用strict 版本，比如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
或者，對于XHTML使用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
你需要處理的最棘手的事情就是IE6進入quirks模式——它已經(jīng)夠詭異了。
2. 設置position: relative
將一個元素設置為”position:relative”可以解決很多問題，特別是你曾經(jīng)遇到隱藏的或?qū)R詭異的盒子。顯然，你需要非常小心點兒，因為絕對定位的子節(jié)點可能會因此重新定位。
3. 將浮動元素設置為display:inline
具有margin屬性的浮動元素可能引起著名的IE6雙倍margin問題，比如，你為一個元素指定margin-left為5px，但是IE6中實際上卻表現(xiàn)為10px。”display:inline”將解決這個問題，盡管這不是必須的，你的CSS仍然是有效的。
4. 將一個元素設置為hasLayout
很多IE6(和IE7)的渲染問題可以通過設置元素的hasLayout來解決。這是一個IE內(nèi)部屬性（IE隱藏的，更多關于haslayout的資料，可以參閱這里），用來確定相對于其他元素，內(nèi)容是如何布局和定位的。如果你需要設置一個inline元素(比如一個鏈接)為block元素，或者是應用透明效果，設置hasLayout也可能是必須的。
最簡單的設置 hasLayout的方法是為CSS設置一個高度或?qū)挾龋▃oom也可以用，但是zoom并不是CSS標準的一部分）。我們推薦設置實際尺寸，但是問題是這是不現(xiàn)實的，你可能需要使用”height:1%”。如果父元素并沒有設置高度，該元素的實際高度并不受影響，而且這個時候hasLayout已經(jīng)被啟用。
5. 修正重復文字bug
復雜的布局可以觸發(fā)在浮動元素的最后一些字符可能出現(xiàn)在出現(xiàn)在清除元素下面的bug。這里有幾個解決方法，有些是完美的，但是做一些反復試驗也是必須的：
.確保所有的元素使用”display:inline;”
.在最后一個元素上使用一個”margin-right:-3px;”
.為浮動元素的最后一個條目使用一個條件注釋，比如：


.在容器的最后元素使用一個空的div(它也有必要設置寬度為90%或類似寬度。
>>>>>>你還可以訪問positioniseverything.net 查看該問題的完整介紹。
6. 在可點擊和懸停的元素上只使用<a>標簽
IE6只認識對a標簽的CSS hover效果。
你也可以在基于JavaScript的組件內(nèi)使用他們來控制，以使他們保持鍵盤的可操作性。是有一些可替代的選擇，但是<a>標簽比其它方案更可靠。
7. 使用!important 或高級選擇器來區(qū)分IE6
不使用傳統(tǒng)Hack或在額外文件中的條件CSS的方法，寫出特別針對IE6的可行的代碼也還是有可能的。比如最小高度可以通過這段代碼來定義：

復制代碼

上一篇：CGI格式文件作用及使用方式

下一篇：css中省去絕對地址前的http: 節(jié)省字節(jié)