E瀏覽器常見的9個css Bug以及解決辦法

標籤：style   blog   http   color   使用   os   strong   io   

我們在瀏覽網頁的時候經常看見這樣的現象：某個網頁在IE6瀏覽器中開啟很正常，但是在IE8裡面開啟可能完全變形了。或者也有可能出現完全相反的現象。這讓Web程式員及設計師往往為了其CSS在各個IE版本下表現怪異而痛苦不已，有時候需要通過專為IE6或者IE8設計單獨的定義。IE瀏覽器則因此被公認為Web程式員的毒藥，雖然在微軟官網上並沒有提供相關的解決方案，但是IE瀏覽器的相容性存在的問題卻是Web程式員必須熟練掌握的。本文總結了9個IE瀏覽器上最常見的Bug，以及它們的解決方案。

 

在IE上開發時間中有超過60%的時間是花在和IE的bug進行搏鬥，讓你的開發生產率嚴重下降。普通的使用者可能不會在意網站的開發人員是不是想盡了辦法讓自己的網站在他們瀏覽時所使用的瀏覽器下能夠相容並且足夠穩定和方便使用。但作為一個優秀的Web程式員是不得不有效解決的一個重要問題。下面為廣大的網頁開發人員提供了一個教程，告訴你在IE上9個最常見的BUG以及如何解決它們。

1. 置中布局
建立一個CSS定義把一個元素經放到中間的位置，可能是每一個Web開發人員都會做的事情。最簡單的做法是為你的元素增加一個margin: auto; ，然而 IE 6.0 會出現很多奇怪的行為。讓我們來看一個例子。

1. #container{border: solid 1px #000;background: #777;width: 400px;height: 160px;margin: 30px 0 0 30px;}#element{background: #95CFEF;border: solid 1px #36F;width: 300px;height: 100px;margin: 30px auto;}

下面是我們所期望的輸出：

但IE卻給我們這樣的輸出：

這應該是IE 6對margin的 auto 並沒有正確的設定。但幸運的是，這是很容易被修正的。

解決方案

最簡單的方法是在父元素中使用 text-align: center 屬性，而在元件中使用 text-align: left 。

 

#container{border: solid 1px #000;background: #777;width: 400px;height: 160px;margin: 30px 0 0 30px;text-align: center;}#element{background: #95CFEF;border: solid 1px #36F;width: 300px;height: 100px;margin: 30px 0;text-align: left;}

 

 

2. 樓梯式的效果
幾乎所有的Web開發人員都會使用list來建立導航條。下面是你可能會用到的代碼：

<ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>ul {list-style: none;}ul li a {display: block;width: 130px;height: 30px;text-align: center;color: #fff;float: left;background: #95CFEF;border: solid 1px #36F;margin: 30px  5px;}

 

一個符合標準的瀏覽器會是下面這樣：

但IE卻是這樣的：

下面是兩個解決方案

解決方案一

設定li元件的float屬性。

1. ul li { float: left; }

解決方案二

設定 display: inline 屬性。

1. ul li {display: inline}

3. float元件的兩倍空白
請看下面的代碼：

1. #element{
2. background: #95CFEF;
3. width: 300px;
4. height: 100px;
5. float: left;
6. margin: 30px 0 0 30px;
7. border: solid 1px #36F;
8. }

期望的結果是：

IE的結果是：

解決方案

和上面那個BUG的解決方案一樣，設定 display: inline 屬性可以解決問題。

#element{background: #95CFEF;width: 300px;height: 100px;float: left;margin: 30px0 030px;border: solid1px#36F;display: inline;}

 

4. 無法設定微型高度
我們發現在IE中使用 height: XXpx 這樣的屬性無法設定比較小的高度。下面是個例子（注意高度是2px）：

#element{background: #95CFEF;border: solid 1px #36F;width: 300px;height: 2px;margin: 30px 0;}

 

期望結果： 2px的元件加1px的邊框.

IE的結果：

解決方案一

這個BUG的產生原因很簡單，IE不允許元件的高度小於字型的高度，所以，下面的fix是設定上字型大小。

1. #element{background: #95CFEF;border: solid1px#36F;width: 300px;height: 2px;margin: 30px0;font-size: 0;}

解決方案二

但是最佳的解決方案是使用 overflow: hidden 。

#element{background: #95CFEF;border: solid1px#36F;width: 300px;height: 2px;margin: 30px0;overflow: hidden}

 

5. 跨出邊界
這個BUG是很難看的。當父元件中使用了 overflow 的 auto 屬性，並且在其裡放入相關元件。你會看來裡面的元件會跨出來。下面是一個樣本：

1. 1. 1. <div id="element">
         　　<div id="anotherelement">
         　　</div>
         </div>#element{background: #95CFEF;border: solid 1px #36F;width: 300px;height: 150px;margin: 30px 0;overflow: auto;}#anotherelement{background: #555;width: 150px;height: 175px;position: relative;margin: 30px;}

          

期望的結果：

IE的結果：

解決方案

設定 position: relative;屬性

1. #element{background: #95CFEF;border: solid1px#36F;width: 300px;height: 150px;margin: 30px0;overflow: auto;position: relative;}

    

6. Fixing the Broken Box Model
Internet Explorer曲解了“盒子模子”可能是最不可原諒的事情了。IE 6 這個半標準的瀏覽器迴避了這個事情，但這個問題還是會因為IE運行在“怪異模式”下出現。

兩個Div元件。一個是有fix的，一個是沒有的。而他們不同的高和寬加上padding的總合卻是不一樣的。的上方是被修正的，下方則沒有。

解決方案

我相信這個事情即不需要解釋也不需要示範，這應該是大多數人都明白的。下面是一個很相當怪異的解決方案

1. #element{width: 400px;height: 150px;padding: 50px;}

    

上面的定義也就是說：

1. #element {width: 400px;height: 150px;height: 250px;width: 500px}

是的，你要原來的長和寬上加上了padding。但這個fix只會作用於IE了的“怪異模式”，所以你不需要擔心在IE6的正常模式下會有問題。

7. 設定min-height和min-width
IE忽略了min-height。

解決方案一

這個fix由 Dustin Diaz提供。其利用了 !important 下面是程式碼片段：

#element {min-height:150px;height:auto!important;height:150px;}

　　

解決方案二

#element {min-height: 150px;height: 150px;}html>body #element {height: auto;}

 

8. Float 布局錯誤行為 Misbehaving
使用無table的布局最重要的就是使用CSS的float元件。在很多情況下，IE6處理起來好像在摸索階段，有些時候，你會發現很多奇怪的行為。比如在其中有一些文本的時候。

來看一下下面這個樣本：

1. <div id="container"><div id="element">http://net.tutsplus.com/</div><div id="anotherelement"></div></div>#element, #anotherelement{background: #95CFEF;border: solid 1px #36F;width: 100px;height: 150px;margin: 30px;padding: 10px;float: left;}#container{background: #C2DFEF;border: solid1px#36F;width: 365px;margin: 30px;padding: 5px;overflow: auto;}

    

期望結果：

IE的結果：

你可以看到其中的不同了

解決方案

要解決這個問題沒有什麼好的方法。只有一個方法，那就是使用 overflow: hidden 。

#element{background: #C2DFEF;border: solid1px#36F;width: 365px;margin: 30px;padding: 5px;overflow: hidden;}

　　

9. 在list項目門的空行

先看下面的例子

1. <ul><li><ahref="#">Link 1</a></li><li><ahref="#">Link 2</a></li><li><ahref="#">Link 3</a></li></ul>ul {margin:0;padding:0;list-style:none;}li a {background: #95CFEF;display: block;}

    

期望結果：

IE的結果：

還好，你可以用下面的方法來解決

解決方案一

定義height來解決

1. li a {background: #95CFEF;display: block;height: 200px;}

    

解決方案二

1. li a {background: #95CFEF;float: left;clear: left;}

    

解決方案三
為 li 加上display: inline。

1. li {display: inline;}

    

結論

調介面是一件很難的事，調一個CSS的HTML介面是一件更難的事，在IE下調一個CSS的HTML介面是難上加難的事。

如今正還有很多使用者在使用IE6瀏覽器，而IE6並不利於網站設計的相容性，而網站開發工程師們一直致力於讓他們的網站能夠相容於IE6下的瀏覽。這也為他們帶來很多的不必要的負擔，我們希望之前仍然在使用IE6的使用者能夠把IE瀏覽器升級到最新IE8，以便你能夠體驗更愉快的網上衝浪，同時(希望)能夠通過這些使用者此舉(升級他們已經過時的瀏覽器)來緩和一直以來網路開發工程師們面臨的緊張複雜的局面。