CSS：IE,，Chrome，F(xiàn)irefox兼容性和CSS Hack

ls02 2013-01-09

展開全文

CSS：IE，Chrome，F(xiàn)irefox兼容性和CSS Hack

以前寫過一篇關于CSS hack的文章，但近期回頭看了看發(fā)現(xiàn)理解的不夠深刻,，總結的也不凝練，于是今天重新測試從新寫一篇,。常用的CSS

hack如下（筆者只對IE&FF&Chrome進行了測試）,。

hack列表（全部經(jīng)筆者測試，且均為標準模式下,，混雜模式由于很少會用到所以未對其進行測試）：

其中粉紅色部分為屬性hack,，黃色部分為選擇器hack,，它們可以結合使用。此外Firefox和Chrome也有它們專有的hack,，詳細hack方式及使

用示例如下：

Firefox：

@-moz-document url-prefix() /*寫在選擇器外層時（只可寫在此處）：Firefox only*/

Chrome：

@media screen and (-webkit-min-device-pixel-ratio:0) /*寫在選擇器外層時（只可寫在此處）：Chrome only*/

使用示例-寫在選擇器前面：

@-moz-document url-prefix() /*Firefox*/

{

body

{

background-color:pink;

}

注意事項：

瀏覽器對css的解析是從前到后的,，并且采用最后一個樣式聲明。

原作者：微米博客

還是不知道怎么區(qū)分.好吧,來看個例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>區(qū)別IE6,、IE7,、IE8、FireFox的CSS hack - http://www.%3c/title>
<style type="text/css">

</style>
</head>

<body>
<div id="test" class="color">測試方塊 www.mycsu.net </div>

<div id="note">
    <strong style="color:#009933">IE6</strong>
    <strong style="color:#0066FF">IE7</strong>
    <strong style="color:#FF0000">IE8</strong>
    <strong style="color:#CC00FF">FireFox</strong>
</div>
</body>
</html>

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

background: red;       /* 對FF Opera和Safari有效 */
#background: blue;      /* 對 IE6 和 IE7有效 */
_background: green;      /* 只對IE6有效 */
/*/background: orange;*/      /** 只對IE8有效 **/

!important /*FF,、IE7有效*/

* /*IE都有效*/

============================================================

IE8是可以和IE7兼容的,，簡單一行代碼，讓IE8自動調用IE7的渲染模式
只需要在頁面中加入如下HTTP meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
只要IE8讀到這個標簽,，它就會自動啟動IE7兼容模式,，保證頁面完整展示。