CSS
在不同瀏覽器的兼容性問題
一、
爲什麼會出現兼容性問題
所謂的瀏覽器兼容性問題，
是指因爲不同的瀏覽器對同一段代碼有不同的解析，
造成頁
面顯示效果不統一的情況。
在大多數情況下，
用戶用什麼瀏覽器來查看同一網站，
都應該是
統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問
題。
瀏覽器兼容問題一
：不同瀏覽器的標籤默認的外邊框和內邊框不同
問題症狀：
隨便寫幾個標籤，不加樣式控制的情況下，各自的
margin
和
padding
差異
較大。
碰到頻率
: 100%
解決方案：
css
裏
*{margin:0;padding:0;}
備註：
這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的
css
文件
開頭都會用通配符
*
來設置各個標籤的內外邊框是
0
。
瀏覽器兼容問題二
：
塊屬性標籤
float
後，
又有橫行的
margin
情況下，
在
IE6
顯示
margin
比設置的大
問題症狀
:
常見症狀是
IE6
中後面的一塊被頂到下一行
碰到頻率：
90%
（稍微複雜點的頁面都會碰到，
float
佈局最常見的瀏覽器兼容問題）
解決方案：
在
float
的標籤樣式控制中加入
display:inline;
將其轉化爲行內屬性
備註：
我們最常用的就是
div+css
佈局了，而
div
就是一個典型的塊屬性標籤，橫向布
局的時候我們通常都是用
div
float
實現的，橫向的間距設置如果用
margin
實現，這就是一
個必然會碰到的兼容性問題。
瀏覽器兼容問題三
：設置較小高度標籤（一般小於
10px
）
，在
IE6
，
IE7
，遨遊中高度超
出自己設置高度
問題症狀：
IE6
、
7
和遨遊裏這個標籤的高度不受控制，超出自己設置的高度
碰到頻率：
60%
解決方案：
給超出高度的標籤設置
overflow:hidden;
或者設置行高
line-height
小於你設
置的高度。
備註：
這種情況一般出現在我們設置小圓角背景的標籤裏。
出現這個問題的原因是
IE8
之前的瀏覽器都會給標籤一個最小默認的行高的高度。
即使你的標籤是空的，
這個標籤的高
度還是會達到默認的行高。
瀏覽器兼容問題四
：行內屬性標籤，設置
display:block
後採用
float
佈局，又有橫行的
margin
的情況，
IE6
間距
bug
（類似第二種）
問題症狀：
IE6
裏的間距比超過設置的間距
碰到機率：
20%
解決方案：
在
display:block;
後面加入
display:inline;display:table;
備註：
行內屬性標籤，爲了設置寬高，我們需要設置
display:block;(
除了
input
標籤比
較特殊
)
。在用
float
佈局並有橫向的
margin
後，在
IE6
下，他就具有了塊屬性
float
後的橫
向
margin
的
bug
。不過因爲它本身就是行內屬性標籤，所以我們再加上
display:inline
的話，
它的高寬就不可設了。這時候我們還需要在
display:inline
後面加入
display:talbe
。
瀏覽器兼容問題五
：圖片默認有間距
問題症狀：
幾個
img
標籤放在一起的時候，有些瀏覽器會有默認的間距，加了問題一
中提到的通配符也不起作用。
碰到機率
：
20%
解決方案：
使用
float
屬性爲
img
佈局
備註：
因爲
img
標籤是行內屬性標籤，所以只要不超出容器寬度，
img
標籤都會排在
一行裏，但是部分瀏覽器的
img
標籤之間會有個間距。去掉這個間距使用
float
是正道。
（使
用負
margin
，雖然能解決，但負
margin
本身就是容易引起瀏覽器兼容問題的用法，所以不
建議使用）
瀏覽器兼容問題六
：標籤最低高度設置
min-height
不兼容
問題症狀：
因爲
min-height
本身就是一個不兼容的
css
屬性，
所以設置
min-height
時不
能很好的被各個瀏覽器兼容
碰到機率
：
5%
解決方案：
如果我們要設置一個標籤的最小高度
200px
，需要進行的設置爲：
{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備註：
在
B/S
系統前端開時，
有很多情況下我們又這種需求。
當內容小於一個值（如
300px
）時。容器的高度爲
300px
；當內容高度大於這個值時，容器高度被撐高，而不是出
現滾動條。這時候我們就會面臨這個兼容性問題。
二、
如何應對兼容性問題
做兼容頁面的方法是：
每寫一小段代碼
（佈局中的一行或者一塊）
我們都要在不同的瀏
覽器中看是否兼容，
當然熟練到一定的程度就沒這麼麻煩了。
建議經常會碰到兼容性問題的
新手使用。
很多兼容性問題都是因爲瀏覽器對標籤的默認屬性解析不同造成的，
只要我們稍
加設置都能輕鬆地解決這些兼容問題。
如果我們熟悉標籤的默認屬性的話，
就能很好的理解
爲什麼會出現兼容問題以及怎麼去解決這些兼容問題
1.
css hack
技術
css hack
技術是通過一些瀏覽器特殊支持或者不支持的語句，確定一個
css
樣式能給被
瀏覽器解析或者不能被瀏覽器解析。
css
hack
技術針對不同瀏覽器的差異進行利用和設計，
使用它可以在最大限度的讓所以的瀏覽器下顯示同樣的風格和模式。
css hack
技術是一種改善
CSS
在不同瀏覽器下的表現形式的技巧與方法。
CSS hack
技
術是通過一些瀏覽器特殊或者不支持的語句，使一個
CSS
樣式能夠被瀏覽器解析或者不能
解析的方法實現的。
CSS
Hack
的原理只有兩條：
兼容性
和
順序
。就是利用書寫順序和不同瀏覽器對一些特
定書寫方法的解析方式不同而達到不同的效果。不管是什麼方法，書寫的順序都是
firefox
的寫在前面，
IE7
的寫在中間，
IE6
的寫在最後面。
（其順序正好是對
CSS2.0
標準執行的好
壞程度）
可把瀏覽器分爲
3
類：
IE6
；
IE7
和遨遊；其他（
IE8 chrome ff safari opera
等）
。
IE6
認
識的
hacker
是下劃線
_
和星號
*
；
IE7
和遨遊只認識的
hacker
是星號
*
；而其他瀏覽器下
劃線
_
和星號
*
都不認識。
比如有這樣一個
css
樣式設置
#exam{
height:300px;
*height:200px;
_height:100px;
}
IE6
瀏覽器在讀到
height:300px
的時候會認爲高度是
300px
；繼續往下讀，他也認識
*heihgt
，所以當
IE6
讀到
*height:200px
的時候會覆蓋掉前一條的相沖突設置，認爲高度是
200px
。繼續往下讀，
IE6
還認識
_height
，所以他又會覆蓋掉
200px
高的設置，把高度設置
爲
100px
；
IE7
和遨遊也是一樣的從高度
300px
的設置往下讀。當它們讀到
*height200px
的
時候就停下了，因爲它們不認識
_height
。所以它們會把高度解析爲
200px
；剩下的瀏覽器只
認識第一個
height:300px;
所以他們會把高度解析爲
300px
。因爲優先級相同且相沖突的屬性
設置後一個會覆蓋掉前一個，所以書寫的次序是很重要的。
DIV
＋
CSS
網頁佈局這是一種趨勢，
不過在使用
DIV
＋
CSS
網站設計的時候，
應該注意
css
樣式兼容不同瀏覽器問題，
特別是對完全使用
DIV+CSS
設計的網頁，
就應該更注意
IE6
、
IE7
和
FF
對
CSS
樣式的兼容。
什麼是瀏覽器兼容：當我們使用不同的瀏覽器（
Firefox
、
IE7
、
IE6
）訪問同一個網站，
或者頁面的時候，
會出現一些不兼容的問題，
在這種瀏覽器下顯示正常，
在另一種下就亂了，
目前解決這個瀏覽器的問題，最直接的方法就是利用
CSS
hack
技術爲每個瀏覽器各寫一段
css
，
讓它們各執行各的，
這就是
CSS hack
技術解決
CSS
在不同瀏覽器中的兼容性問題的核
心。
2.
!important
!important
是被
Firefox
瀏覽器所支持的一種用於確定優先級的技術。
隨着
IE7
對
!important
的支持，
!important
方法現在只針對
IE6
的兼容性問題。注意：
!important
也
算是
hack
的一種。不過實用性較小。
例如
:
#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}
三、
CSS HACK
的常用方法
首先需要知道的是：
所有瀏覽器
通用
height: 100px;
IE6
專用
_height: 100px;
IE7
專用
*+height: 100px;
IE6
、
IE7
共用
*height: 100px;
IE7
、
FF
共用
height: 100px !important;
例如：
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
/*
注意：這個範例中區別符號在樣式名前面，並且加了
html*/
下面的這種方法比較簡單
舉幾個例子：
1
、
IE6 - IE7+FF
（
-
爲區別，
+
爲共同）
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其實這個用上面說的第一種方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2
、
IE6+IE7 - FF
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7
IE7
的後一次應用將第一次覆蓋了
*/
}
3
、
IE6+FF - IE7
#example {
height:100px; /* IE6+FF
但兩者效果可能不同
*/
*+height:200px; /* IE7 */
}
4
、
IE6 IE7 FF
各不相同
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}
需要注意的是，代碼的順序一定不能顛倒了，要不又前功盡棄了。因爲瀏覽器在解釋
程序的時候，如果重名的話，會用後面的覆蓋前面的，就象給變量賦值一個道理，所以我
們把通用的放前面，越專用的越放後面。
解釋一下
4
的代碼：讀代碼的時候，第一行
height:100px;
大家都通用，
IE6
IE7
FF
都
顯示
100px
。到了第二行
*height:300px; FF
不認識這個屬性，
IE6 IE7
都認，所以
FF
還顯示
100px
，而
IE6
IE7
把第一行得到的
height
屬性給覆蓋了，都顯示
300px
。到了第三行
_height:200px;
只有
IE6
認識，
所以
IE6
就又覆蓋了在第二行得到的
height
，
最終顯示
200px
。
這樣，三個瀏覽器都有自己的
height
屬性了。
需要說明的是：
*+html
對
IE7
的兼容
必須保證
HTML
頂部有如下聲明：
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd ">
四、
使用
IE
專用的條件註釋
條件註釋是
IE
特有的一種功能，能對
IE
系列產品進行單獨的
XHTML
代碼處理，注意，主要
是針對
XHTML,
而非
CSS
。
條件註釋能被
IE
判斷是什麼版本的瀏覽器，
並在符合條件的情況下顯示其中的內容，
從
IE5.0
到
7.0
都支持註釋功能，而且版本號精確到小數點後
4
位。
如：
<!--[if IE 6.0]>
此內容只有
IE6.0
可見
<![endif]-->
IE
條件註釋還支持感嘆號非操作：
如：
<!--[if !IE 6.0]>
此內容除了
IE6.0
版本之外都可見
<![endif]-->
<!--
其他瀏覽器
-->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!--
適合於
IE7 -->
<link rel="stylesheet" type="text/css" href="IE7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!--
適合於
IE6
及以下
-->
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
IE
的
if
條件
Hack
1. <!--[if
!IE]><!-->
除
IE
外都可識別
<!--<![endif]-->
2. <!--[if
IE]>
所有的
IE
可識別
<![endif]-->
3. <!--[if
IE 5.0]>
只有
IE5.0
可以識別
<![endif]-->
4. <!--[if
IE 5]>
僅
IE5.0
與
IE5.5
可以識別
<![endif]-->
5. <!--[if
gt
IE 5.0]> IE5.0
以上版本都可以識別
<![endif]-->
6. <!--[if
IE 6]>
僅
IE6
可識別
<![endif]-->
7. <!--[if
lt
IE 6]> IE6
以及
IE6
以下版本可識別
<![endif]-->
8. <!--[if
gte
IE 6]> IE6
以及
IE6
以上版本可識別
<![endif]-->
9. <!--[if
IE 7]>
僅
IE7
可識別
<![endif]-->
10. <!--[if
lt
IE 7]> IE7
以及
IE7
以下版本可識別
<![endif]-->
11. <!--[if
gte
IE 7]> IE7
以及
IE7
以上版本可識別
<![endif]-->
注
:
gt = Great Then
大於