IE瀏覽器下的CSS問題小結

發布時間：2012-10-11 23:52:59 ? 作者：佚名 ? 我要評論

IE瀏覽器下的CSS問題小結，需要的朋友可以參考下

IE下的特殊情況

下面是14條特殊情況你看一下是哪個問題出錯了這些僅供參考：

1. 文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實際占高16px，下留白3px，ff 下實際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設定 line-height 。確保所有文字都有默認的 line-height 值。這點很重要，在高度上我們不能容忍1px 的差異。

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

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

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

a.

c.

上面的代碼在不同瀏覽器中是不一樣的，實驗起源于對小height 值div 的運用，

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

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

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

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

7.注釋也能產生bug~~~“多出來的一只豬。”這是前人總結這個bug使用的文案，ie6的這個bug 下，大家會在頁面看到豬字出現兩遍，重復的內容量因注釋的多少而變。解決方案：用“ picRotate start ”方法寫注釋。

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

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

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

9. 失去line-height。

文字，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。

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

10.clear層應該單獨使用。也許你為了節省代碼把clear屬性直接放到下面的一個內容層，這樣有問題，不僅僅是ff和op下失去margin效果，ie下某些margin值也會失效

ddff

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元素如沒定義寬度，內部如有div定義了height或zoom:1，這個div就會占滿一整行，即使你給了寬度。float元素如果作為布局用或復雜的容器，都要給個寬度的。

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

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

ie的float bug(ie6,ie7)使前端工程師們為之困擾,最常見的現象就是:當浮動元素的父級元素在拖動滾動條的時候出現邊框的缺失,對于此類問題的解決方案就是使浮動元素獲得布局.

在諸多的情況中,因為頁面需要寬度自由伸縮而不能申明寬度為固定值,但我們可以設置*height:1%;,*在這里可謂是舉足輕重,因為*只能被ie7及以下版本解析,ie8并不識別此類寫法,所以可以使用這個寫法來區別ie8和其他版本號的ie瀏覽器.對網上流行的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)，具體規則與正則中的匹配很相似：

E[att^=’val’] //子串以’val’ 開始

E[att$=’val’] //子串以’val’ 結束

E[att*=’val’] //子串中包含’val’

IE8 支持絕大多數基本的 CSS2.1 選擇器，不支持的包括但不限于：[:first-line] 、[:first-letter]。

對于 CSS2.1 中的 generated content 部分，即通過使用偽元素 :before 和 :after 添加文本內容，IE8 中支持 并未完全 。

而對于幾乎在其他瀏覽器中都支持的 opacity 和 RGBA ，IE8 中依舊沒有支持。

對于原來用來區分 IE 的 HACK 在 IE8 中基本失效(比如*property:value、*property:value等)。

原有 IE 的 list-item whitespace bug 在 IE8 中依舊存在。

原有 IE 的 z-index bug 在 IE8 中依舊存在。

IE8 中產生新的 bug：當 line-heigth 小于正常值時，超出的部分將被裁切掉。

IE8 中依然不支持 display:table 。

IE8 中依然不支持 border 的 transparent 值。

IE8 中 @import 只支持三層嵌套。

IE8中 border的 transparent 不被支持

IE8中產生新的BUG：line-heigth BUG

只針對IE8的hack，可以是屬性也可以是類

BUG描述：

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

分析：

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

解決方法：

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

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

ie6的末日即將來臨,對我們前端開發人員來說,無疑是一個慰藉人心的喜訊.但這個末日也并非朝日可至,所以我們還是爭取最后的勝利,用各種 hack和方法來規避ie6下雙邊距,背景透明,重復文字等等一堆bug.下面是轉載自前端觀察(譯自www.sitepoint.com)中的10個修復ie6下bug技巧:

1. 使用DOCTYPE

你應該在一直每個HTML文件的頭部都使用DOCTYPE，并且我們推薦使用strict 版本，比如：

或者，對于XHTML使用:

你需要處理的最棘手的事情就是IE6進入quirks模式——它已經夠詭異了。

2. 設置position: relative

將一個元素設置為”position:relative”可以解決很多問題，特別是你曾經遇到隱藏的或對齊詭異的盒子。顯然，你需要非常小心點兒，因為絕對定位的子節點可能會因此重新定位。

3. 將浮動元素設置為display:inline

具有margin屬性的浮動元素可能引起著名的IE6雙倍margin問題，比如，你為一個元素指定margin-left為5px，但是IE6中實際上卻表現為10px。”display:inline”將解決這個問題，盡管這不是必須的，你的CSS仍然是有效的。

4. 將一個元素設置為hasLayout

很多IE6(和IE7)的渲染問題可以通過設置元素的hasLayout來解決。這是一個IE內部屬性(IE隱藏的，更多關于haslayout的資料，可以參閱這里)，用來確定相對于其他元素，內容是如何布局和定位的。如果你需要設置一個inline元素(比如一個鏈接)為block元素，或者是應用透明效果，設置hasLayout也可能是必須的。

最簡單的設置 hasLayout的方法是為CSS設置一個高度或寬度(zoom也可以用，但是zoom并不是CSS標準的一部分)。我們推薦設置實際尺寸，但是問題是這是不現實的，你可能需要使用”height:1%”。如果父元素并沒有設置高度，該元素的實際高度并不受影響，而且這個時候hasLayout已經被啟用。

5. 修正重復文字bug

復雜的布局可以觸發在浮動元素的最后一些字符可能出現在出現在清除元素下面的bug。這里有幾個解決方法，有些是完美的，但是做一些反復試驗也是必須的：

.確保所有的元素使用”display:inline;”

.在最后一個元素上使用一個”margin-right:-3px;”

.為浮動元素的最后一個條目使用一個條件注釋，比如：

.在容器的最后元素使用一個空的div(它也有必要設置寬度為90%或類似寬度。

>>>>>>你還可以訪問positioniseverything.net 查看該問題的完整介紹。

6. 在可點擊和懸停的元素上只使用標簽

IE6只認識對a標簽的CSS hover效果。

你也可以在基于JavaScript的組件內使用他們來控制，以使他們保持鍵盤的可操作性。是有一些可替代的選擇，但是標簽比其它方案更可靠。

7. 使用!important 或高級選擇器來區分IE6

不使用傳統Hack或在額外文件中的條件CSS的方法，寫出特別針對IE6的可行的代碼也還是有可能的。比如最小高度可以通過這段代碼來定義：

復制代碼代碼如下:

#element {

min-height: 20em;

height: auto !important;

height: 20em;

#element[id] {

height: auto;

}

8. 避免百分比單位

百分比會把IE搞糊涂的。除非你可以確切的控制每一個父元素的大小，才可能做到最佳預防。你可以通過!important在其他瀏覽器中繼續使用百分比，比如：

body {

margin: 2% 0 !important;

margin: 20px 0;

}

9. 盡早測試并不斷測試

不要等到你的網站或應用完成了才測試IE6;這樣的話問題可能更糟糕，而且會花更多時間來修正。如果你的網站能夠在Firefox和IE6中正常運行，那么一般在其它瀏覽器就不會有問題。

10. 重構你的代碼

經常發生的事情是，修正bug要比重新考慮一個布局問題要花更長的時間。對HTML做些小改動和一些簡單的CSS常常更有效。這可能意味著你要放棄完美的代碼，但是會出現較少的長期問題而且將來你會很清楚如果處理這些可能出現的問題。

-------------------------------------------------------------------------------------------------------

讓IE6支持PNG格式的圖片

用法：

先復制下面的代碼在記事本中，然后另存為pngbehavior.htc(名字可以任意)：

復制代碼代碼如下:

var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&

navigator.platform == "Win32";

var realSrc;

var blankSrc = "blank.gif";

var isPrinting = false;

if (supported) fixImage();

function propertyChanged() {

if (!supported || isPrinting) return;

var pName = event.propertyName;

if (pName != "src") return;

// if not set to blank

if (!new RegExp(blankSrc).test(src))

fixImage();

};

function fixImage() {

// get src

var src = element.src;

// check for real change

if (src == realSrc && /\.png$/i.test(src)) {

element.src = blankSrc;

return;

}

if ( ! new RegExp(blankSrc).test(src)) {

// backup old src

realSrc = src;

}

// test for png

if (/\.png$/i.test(realSrc)) {

// set blank image

element.src = blankSrc;

// set filter

element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +

"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";

}

else {

// remove filter

element.runtimeStyle.filter = "";

}

}

function beforePrint() {

isPrinting = true;

element.src = realSrc;

element.runtimeStyle.filter = "";

realSrc = null;

}

function afterPrint() {

isPrinting = false;

fixImage();

}

最后在你的css文件里面加上這么一段代碼：

img {behavior: url("pngbehavior.htc");}

相關文章

這篇文章主要介紹了關于CSS浮動與取消浮動的問題，通過設置元素脫離正常的文檔流讓元素靠左或向右靠近，通過設置文字包周圍圖片來解決浮動問題，具體解決方法跟隨小編一起2021-06-28

本文介紹了什么是 ::marker 以及它的一些實用場景，可以看出雖然 ::before 、::after 也能實現類似的功能，但 CSS 還是提供了更具有語義化的標簽 ::marker，也表明了大家需2021-06-25

很多前端的初學者,在使用margin的之后或許會遇到一些問題，本文主要介紹了margin塌陷和margin合并，需要的朋友們下面隨著小編來一起學習學習吧2021-06-24

當我們想寫一個類似掘金的文章或者自己的博客的時候，是否有想過該怎么實現給自己文章的章節添加章節號，本文就來介紹一下使用CSS實現章節添加自增序號的方法，感興趣的可2021-06-23

本文主要介紹了CSS變量實現主題切換的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-06-23

本文就將介紹一些使用單標簽繪圖的技巧，并且使用這些技巧，借用單個標簽去實現一些復雜圖形，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2021-06-16

這篇文章主要介紹了CSS幾步實現賽博朋克2077風格視覺效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-15

今天來帶大家做一個可愛的滑動導航欄效果，這個demo很基礎，但是使用場景非常廣泛，感興趣的小伙伴們可以參考一下2021-06-15

大家都知道Calc方法有個很大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度，本文通過一個例子給大家詳細介紹，需要的朋友參考下吧2021-06-03

本文將給大家介紹使用 CSS prefers-* 規范提升網站的可訪問性與健壯性的相關知識，在css媒體查詢中新增的幾個特征功能,本文也給大家詳細介紹，需要的朋友可以參考下2021-05-25

最新評論

總結

以上是生活随笔為你收集整理的ie浏览器css怎么调,IE浏览器下的CSS问题小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。