動畫兼容

Firefox: -moz-
Safari: -webkit-
Opera: -o-
IE: -ms-

-webkit-transform: translateY(-50%) rotate(-40deg);
-moz-transform: translateY(-50%) rotate(-40deg);
-ms-transform: translateY(-50%) rotate(-40deg);
-o-transform: translateY(-50%) rotate(-40deg);
transform: translateY(-50%) rotate(-40deg);

代碼舉例：
.page_home .i1{
background: url('../imgs/page_home_identify.png') no-repeat;
background-size: cover;
-moz-animation: Up 1s ease forwards;
-webkit-animation: Up 1s ease forwards;
-ms-animation: Up 1s ease forwards;
-o-animation: Up 1s ease forwards;
animation: Up 1s ease forwards;
}

@-webkit-keyframes Up{
from{
    transform: translateY(0rem);
    opacity: 0;
}
to{
    transform: translateY(1.9rem);
    opacity: 1;
}
 }
@-moz-keyframes Up{
from{
    transform: translateY(0rem);
    opacity: 0;
}
to{
    transform: translateY(1.9rem);
    opacity: 1;
}
}
@keyframes Up{
from{
    transform: translateY(0rem);
    opacity: 0;
}
to{
    transform: translateY(1.9rem);
    opacity: 1;
}
}

使IE6,7,8支持h5常用新標簽以及部分常用CSS3渲染

引入PIE.js文件使IE6,7,8支持部分常用CSS3渲染
官網(wǎng)http://css3pie.com 名稱：PIE.js
此JS可使IE6,7,8支持CSS3的部分渲染
例如：border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
使用辦法：
此API使用非常簡單谬盐，只需要在頁面頭部引用
JavaScript Code復(fù)制內(nèi)容到剪貼板

以下是jQuery的調(diào)用辦法嘶摊，把你需要渲染的樣式名寫上即可
JavaScript Code復(fù)制內(nèi)容到剪貼板
$(function() {
$('.rounded').each(function() {
PIE.attach(this);
});
});

同樣璃吧，如果要刪除某個樣式的CSS3效果

響應(yīng)式兼容

使用 CSS 媒體查詢創(chuàng)建響應(yīng)式網(wǎng)站

（適用于所有屏幕大小的設(shè)計 手機端）

先決條件
本文中的代碼樣例被設(shè)計為可運行于支持 CSS 媒體查詢的網(wǎng)頁瀏覽器中排宰，這些瀏覽器包括 Mozilla Firefox、Apple Safari、Google Chrome 和 Opera。請參閱 參考資料，獲取展示了桌面和移動瀏覽器中的 CSS3 媒體查詢的瀏覽器兼容性支持的完整列表涯竟。

媒體查詢
從 CSS 版本 2 開始，就可以通過媒體類型在 CSS 中獲得媒體支持烘嘱。如果您曾經(jīng)使用過打印樣式表昆禽，那么您可能已經(jīng)使用過媒體類型。清單 1 展示了一個示例蝇庭。
清單 1. 使用媒體類型

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在清單 1 中醉鳖，media
屬性定義了應(yīng)該用于指定每種媒體類型的樣式表：
screen
適用于計算機彩色屏幕。
print
適用于打印預(yù)覽模式下查看的內(nèi)容或者打印機打印的內(nèi)容哮内。

作為 CSS v3 規(guī)范的一部分盗棵，可以擴展媒體類型函數(shù)，并允許在樣式表中使用更精確的顯示規(guī)則北发。媒體查詢 是評估 True 或 False 的一種表達纹因。如果為 True，則繼續(xù)使用樣式表琳拨。如果為 False瞭恰，則不能使用樣式表。這種簡單邏輯通過表達式變得更加強大狱庇，使您能夠更靈活地對特定的設(shè)計場景使用自定義的顯示規(guī)則惊畏。
媒體查詢包含一個媒體類型，后跟一個或多個檢查特定條件（如最小的屏幕寬度）的表達式密任。樣式表中的媒體查詢看起來如清單 2 中的示例所示颜启。
清單 2. 媒體查詢規(guī)則

@media all and (min-width: 800px) { ... }

根據(jù)清單 2 中的標記，所有最小水平屏幕寬度為 800 像素的屏幕（屏幕和打印等）都應(yīng)使用如下 CSS 規(guī)則浪讳。該規(guī)則在示例中省略號所在的地方缰盏。對于該媒體查詢：

@media all
是媒體類型，也就是說淹遵，將此 CSS 應(yīng)用于所有媒體類型口猜。
(min-width:800px)
是包含媒體查詢的表達式，如果瀏覽器的最小寬度為 800 像素透揣，則會告訴瀏覽器只運用下列 CSS济炎。

請注意，在清單 2 中淌实，可以省略關(guān)鍵詞 all 和 and冻辩。

在將某個媒體查詢應(yīng)用于所有媒體類型時，會省略 all拆祈。后面的 and也是可選的恨闪。使用簡寫語法重新編寫媒體查詢，如清單 3 所示放坏。
清單 3. 簡寫語法

@media (min-width:800px) { ... }

媒體查詢也可以包含復(fù)雜表達式咙咽。例如，如果您想要創(chuàng)建一個僅在最小寬度為 800 像素且最大寬度為 1200 像素時應(yīng)用的樣式淤年，則需要按照清單 4 中的規(guī)則來做钧敞。
清單 4. 復(fù)雜表達式

@media (min-width:800px) and (max-width:1200px) { ... }

在您的表達式中，您可以根據(jù)自己的喜好使用任意數(shù)量的 and
條件麸粮。如果您想要增加其他條件來檢查特定的屏幕方向溉苛，只需添加另一個 and
關(guān)鍵詞，后跟 orientation
媒體查詢弄诲，如清單 5 所示愚战。
清單 5. and條件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

清單 5 中的媒體查詢僅在寬度為 800 到 1200 像素且方向是縱向時才能激活。（通常齐遵，方向僅對能夠輕易轉(zhuǎn)換縱橫模式的智能手機和平板電腦上是有意義的寂玲。）如果其中一個條件為 False，則無法應(yīng)用媒體查詢規(guī)則梗摇。
and
關(guān)鍵詞的反義詞是 or
關(guān)鍵詞拓哟。和 and一樣，這些條件組合在一起會構(gòu)成復(fù)雜表達式伶授。如果其中有一個條件為 True断序，那么整個表達式或分離的兩個條件都會為 True，如清單 6 所示谎砾。
清單 6. or
關(guān)鍵詞

@media (min-width:800px) or (orientation:portrait) { ... }

如果寬度至少是 800 像素或方向是縱向的逢倍，則會應(yīng)用該規(guī)則。
另一個保存在詞庫中的媒體查詢關(guān)鍵詞是 not
景图。位于媒體查詢的開始處较雕，not
會忽略結(jié)果。換句話說挚币，如果該查詢本來在沒有 not
關(guān)鍵詞的情況下為 true亮蒋，那么現(xiàn)在它將為 false。清單 7 展示一個示例妆毕。
清單 7. 使用 not

@media (not min-width:800px) { ... }

僅從英文意思上理解慎玖，清單 7 中代碼的表示：當最小寬度不是 800 像素時，會應(yīng)用下列 CSS 規(guī)則笛粘。這些示例只是將像素作為媒體查詢中的測量單位趁怔，但是測量單位并不僅限于像素湿硝。您可以使用任何有效的 CSS 測量單位，比如厘米 (cm)润努、英寸 (in)关斜、毫米 (mm) 等。

有用的媒體特性

媒體很多特性铺浇，比如寬度痢畜、顏色和網(wǎng)格，您可以在媒體查詢中使用它們鳍侣。對每個可能的媒體特性進行描述不在本文討論范圍內(nèi)丁稀。關(guān)于媒體查詢的文檔 The World Wide Web Consortium's (W3C) 提供了這方面的一個完整清單。（請參閱 參考資料）倚聚。
要設(shè)計響應(yīng)式網(wǎng)站线衫，只需要了解一些媒體特性：方向、寬度和高度惑折。作為一個簡單媒體特性桶雀，方向的值可以是 portrait或 landscape。這些值適用于持有手機或平板電腦的用戶唬复，使您可以根據(jù)兩個形狀因素來優(yōu)化內(nèi)容矗积。當高度大于長度時，則認為屏幕是縱向模式敞咧，當寬度大于高度時棘捣，則認為屏幕是橫向模式。清單 8 顯示了一個使用 orientation
媒體模式查詢的示例休建。
清單 8. orientation媒體查詢

@media (orientation:portrait) { ... }

高度和寬度行為十分相似乍恐，都支持以 min- 和 max-為前綴。
清單 9 展示了一個有效的媒體查詢测砂。
清單 9. 高度和寬度媒體查詢

@media (min-width:800px) and (min-height:400px) { ... }

如果沒有 min-或 max-前綴茵烈，您還可以使用 width 和 height 媒體特性，如清單 10 所示砌些。
清單 10. 不帶 min-和 max-前綴

@media (width:800px) and (height:400px) { ... }

當屏幕正好是 800 像素寬呜投、400 像素高時，可以使用清單 10 中的媒體查詢〈媪В現(xiàn)實中仑荐，像這樣的媒體查詢可能過于具體而不太有用。檢測精確維度是大多數(shù)網(wǎng)站訪問者都不可能遇到的一個場景纵东。通常情況下粘招，響應(yīng)式設(shè)計會使用范圍來執(zhí)行屏幕檢測。
作為媒體查詢大小范圍的后續(xù)內(nèi)容偎球，下一節(jié)將討論一些常見的媒體查詢洒扎，在設(shè)計一個響應(yīng)式網(wǎng)站時辑甜，您可能會發(fā)現(xiàn)它們非常有用。

常見媒體查詢

因為 Apple 首次向市場推出了用戶智能手機和平板電腦產(chǎn)品袍冷，所以下列大多數(shù)媒體查詢都是基于這些型號的設(shè)備栈戳。

如果目標是橫向模式智能手機，則使用： @media (min-width: 321px) { ... }

如果目標是縱向模式智能手機难裆，則使用： @media (max-width: 320px) { ... }

如果目標是橫向模式 Apple iPad，則使用： @media (orientation: landscape) { ... }

如果目標是縱向模式 iPad镊掖，則使用： @media (orientation: portrait) { ... }

您可能已經(jīng)注意到了乃戈，iPad 上使用的是 orientation媒體特性，而 width
用于 Apple iPhone 之上亩进。主要是因為 iPhone 不支持orientation媒體特性症虑。您必須使用 width模擬這些方向斷點。請參閱 參考資料归薛，獲取有關(guān)常見媒體特性的更多信息谍憔。

SASS 中的媒體查詢

Ruby on Rails 中的內(nèi)置支持有助于推進 Syntactically Awesome Style Sheets (SASS) 的盛行，使其在 Web 開發(fā)社區(qū)中迅速走強主籍。關(guān)于 SASS 的詳細討論已超出了本文的討論范圍习贫，但我會在基于 SASS 的樣式表中簡要介紹使用媒體查詢的基礎(chǔ)知識。請參閱 Resources千元，獲取有關(guān) SASS 的更多信息苫昌。
SASS 行為中的媒體查詢與普通 CSS 中的完全相同，但有一個例外：它們可以嵌套在其他 CSS 規(guī)則中幸海。當一個媒體查詢嵌套在另一個 CSS 規(guī)則中時祟身，會將規(guī)則置于樣式表的頂層，如清單 11 所示物独。
清單 11. 嵌套的媒體查詢

header { width: 400px; @media (min-width: 800px) { width: 100%; }}

清單 11 中的示例將編譯到清單 12 的代碼中袜硫。
清單 12. 編譯結(jié)果

.header { width: 400px;}
@media (min-width: 800px) { .header { width: 100%; }}

組織您的媒體查詢
現(xiàn)在，我們已經(jīng)了解了如何編寫媒體查詢挡篓，是時候考慮采用以一種合乎邏輯的婉陷、有組織的方式將媒體查詢部署到您的 CSS 代碼中了。確定如何組織媒體查詢很大程度上是一種個人偏好官研。這一小節(jié)將探討兩種主要方法的優(yōu)點和缺點憨攒。
第一個方法是為不同屏幕大小指定完全不同的樣式表。優(yōu)點是規(guī)則可以保存在獨立樣式表中阀参，這使得顯示邏輯能夠清楚地劃分出來肝集，更便于團隊進行維護。另一個優(yōu)勢是源代碼分支之間的合并變得更為容易蛛壳。但優(yōu)點同時也是缺點杏瞻。如果要為每個媒體查詢創(chuàng)建單獨的樣式表所刀，則無法將一個元素的所有樣式表放在同一文件夾的同一位置。當改變一個 CSS 中的一個元素時捞挥，需要創(chuàng)建多個位置進行查看浮创，這使得網(wǎng)站 CSS 的維護變得更加困難。
第二個方法是在現(xiàn)有樣式表中使用媒體查詢砌函，該樣式表就在定義其余元素樣式表的位置的旁邊斩披。這種方法的優(yōu)勢是可以將所有元素樣式保存在同一個位置。當在團隊模式下工作時讹俊，這種做法可以創(chuàng)建更多源代碼合并工作垦沉，但這是所有基于團隊的軟件開發(fā)都可以管理且常見的一部分。
沒有所謂正確或錯誤方法仍劈。您只需選擇最適合您的項目和團隊的方法即可厕倍。

瀏覽器支持

到現(xiàn)在為止，您可能已經(jīng)相信 CSS 媒體查詢是一個強大的工具贩疙，而且想知道哪些瀏覽器支持 CSS 媒體查詢讹弯。以下是這方面的好消息和壞消息。

好消息是：大多數(shù)現(xiàn)代瀏覽器（包括智能手機上的瀏覽器）都支持 CSS 媒體查詢这溅。
壞消息是：最近组民，來自 Redmond 的 Windows? Internet Explorer? 8 瀏覽器不支持媒體查詢。對于大多數(shù)專業(yè) Web 開發(fā)人員來說悲靴，這意味著您需要提供一個解決方案邪乍，以便在 Internet Explorer 中支持媒體查詢。

下列解決方案是一個名為 respond.js 的 JavaScript polyfill对竣。

帶有 respond.js 的 Polyfill
Respond.js 是一個極小的增強 Web 瀏覽器的 JavaScript 庫庇楞，使得原本不支持 CSS 媒體查詢的瀏覽器能夠支持它們。該腳本循環(huán)遍歷頁面上的所有 CSS 引用否纬，并使用媒體查詢分析 CSS 規(guī)則吕晌。然后，該腳本會監(jiān)控瀏覽器寬度變化临燃，添加或刪除與 CSS 中媒體查詢匹配的樣式睛驳。最終結(jié)果是，能夠在原本不支持的瀏覽器上運行媒體查詢膜廊。
由于這是一個基于 JavaScript 的解決方案乏沸，所以瀏覽器需要支持 JavaScript，以便運行腳本爪瓜。該腳本只支持創(chuàng)建響應(yīng)式設(shè)計所需的最小和最大width 媒體查詢蹬跃。這并不是適用于所有可能 CSS 媒體查詢的一個替代。在 參考資料 部分铆铆，可以閱讀關(guān)于該腳本特性和局限性的更多信息蝶缀。
Respond.js 是您可以選擇的諸多可用開源媒體查詢 polyfills 之一丹喻。如果您覺得 respond.js 無法滿足您的需求，在進行一個小小的研究之后翁都，您就會發(fā)現(xiàn)幾個替代方案碍论。

幾種常見的瀏覽器兼容性問題

js

1. HTML對象獲取問題

FireFox：document.getElementById("idName");ie:document.idname或者document.getElementById("idName").解決辦法：統(tǒng)一使用document.getElementById("idName");

2.const問題

Firefox下,可以使用const關(guān)鍵字或var關(guān)鍵字來定義常量;
IE下,只能使用var關(guān)鍵字來定義常量.
解決方法：統(tǒng)一使用var關(guān)鍵字來定義常量.

3.event.x與event.y問題

IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
解決方法：使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX.

4.window.location.href問題

IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解決方法：使用window.location來代替window.location.href.

5.firefox與IE的父元素(parentElement)的區(qū)別

IE：obj.parentElement
firefox：obj.parentNode
解決方法: 因為firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇.

6.集合類對象問題

IE下，可以使用 () 或 [] 獲取集合類對象柄慰；
Firefox下鳍悠，只能使用 [ ]獲取集合類對象。
解決方法：統(tǒng)一使用 [] 獲取集合類對象坐搔。

7.自定義屬性問題

IE下藏研，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute() 獲取自定義屬性薯蝎；
Firefox下，只能使用getAttribute() 獲取自定義屬性谤绳。
解決方法：統(tǒng)一通過getAttribute() 獲取自定義屬性占锯。
對象屬性的設(shè)置寫為：document.getElementById(‘元素ID屬性值’).setAttribute(‘width’, ‘100’)
document.getElementsByTagName(‘元素標簽名’)[0].setAttribute(‘width’, ‘100’)

8.input.type屬性問題

IE下input.type屬性為只讀；但是Firefox下input.type屬性為讀寫缩筛。
解決辦法：不修改input.type屬性消略。如果必須要修改，可以先隱藏原來的input瞎抛，然后在同樣的位置再插入一個新的input元素艺演。

9.Table操作問題

ie、firefox以及其它瀏覽器對于 table 標簽的操作都各不相同桐臊，在ie中不允許對table和tr的innerHTML賦值胎撤，使用js增加一個tr時，使用appendChild方法也不管用断凶。
解決方法：//向table追加一個空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);
[注] 由于俺很少使用JS直接操作表格伤提，這個問題沒有遇見過。建議使用JS框架集來操作table认烁，如JQuery肿男。

css

1.cursor:hand VS

cursor:pointerfirefox不支持hand，但ie支持pointer
解決方法: 統(tǒng)一使用pointer

2.innerText在IE中能正常工作却嗡，但在FireFox中卻不行. 需用textContent舶沛。

解決方法:
if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById('element').innerText = "my text";} else{ document.getElementById('element').textContent = "my text";}

3.CSS透明

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6窗价。
opacity 透明如庭，子元素會繼承透明屬性。
解決方式：1撼港、使用 background:rgba(0,0,0,.6) //IE8及以下無效果柱彻。 2豪娜、使用定位，背景色與子元素處于同級關(guān)系哟楷。

4.css中的width和padding

在IE7和FF中width寬度不包括padding瘤载，在Ie6中包括padding.

5.IE5 和IE6的BOX解釋不一致

IE5下div{width:300px;margin:0 10px 0 10px;}
div 的寬度會被解釋為300px-10px(右填充)-10px(左填充)，最終div的寬度為280px卖擅，
而在IE6和其他瀏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來計算的鸣奔。
這時我們可以做如下修改 div{width:300px!important;width :340px;margin:0 10px 0 10px}

6.ul和ol列表縮進問題

消除ul、ol等列表的縮進時惩阶，樣式應(yīng)寫成：list-style:none;margin:0px;padding:0px;經(jīng)驗證挎狸，在IE中，設(shè)置margin:0px可以去除列表的上下左右縮進断楷、空白以及列表編號或圓點锨匆，設(shè)置padding對樣式?jīng)]有影響；在 Firefox 中冬筒，設(shè)置margin:0px僅僅可以去除上下的空白恐锣，設(shè)置padding:0px后僅僅可以去掉左右縮進，還必須設(shè)置list- style:none才能去除列表編號或圓點舞痰。
也就是說土榴，在IE中僅僅設(shè)置margin:0px即可達到最終效果，而在Firefox中必須同時設(shè)置margin:0px响牛、 padding:0px以及l(fā)ist-style:none三項才能達到最終效果玷禽。

7.元素水平居中問題

FF: margin:0 auto;
IE: 父級{ text-align:center; }

8.margin加倍的問題

設(shè)置為float的div在ie下設(shè)置的margin會加倍。
這是一個ie6都存在的bug呀打。
解決方案是在這個div里面加上display:inline;

9.IE與寬度和高度的問題

IE不認得min-這個定義矢赁，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了贬丛，如果只用寬度和高度坯台，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話瘫寝，IE下面根本等于沒有設(shè)置寬度和高度蜒蕾。
比如要設(shè)置背景圖片，這個寬度是比較重要的焕阿。要解決這個問題咪啡，可以這樣：
.box{ width: 80px; height: 35px;}html>body .box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

10.IE6下圖片下有空隙產(chǎn)生

解決這個BUG的技巧有很多,可以是改變html的排版,或者設(shè)置img為display:block或者設(shè)置vertical-align屬性為vertical-align:top/bottom/middle/text-bottom 都可以解決.

11.對齊文本與文本輸入框

加上vertical-align:middle;
<style type="text/css">
</style>經(jīng)驗證，在IE下任一版本都不適用暮屡，而ff撤摸、opera、safari、chrome均OK

12.為什么web標準中IE無法設(shè)置滾動條顏色了

解決辦法是將body換成html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">＜/style>

13.為什么無法定義1px左右高度的容器

IE6下這個問題是因為默認的行高造成的,解決的技巧也有很多：
例如:overflow:hidden　 zoom:0.08 　 line-height:1px

14.為什么FF下文本無法撐開容器的高度

標準瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設(shè)置呢准夷？辦法就是去掉height設(shè)置min-height:200px; 這里為了照顧不認識min-height的IE6 可以這樣定義:{ height:auto!important; height:200px; min-height:200px; }

15.FORM標簽

這個標簽在IE中,將會自動margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對上面兩個問題,我的css中一般首先都使用這樣的樣式ul,form{margin:0;padding:0;}

16.超鏈接訪問過后hover樣式就不出現(xiàn)的問題

被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應(yīng)該都遇到過這個問題,解決技巧是改變CSS屬性的排列順序: L-V-H-A
a標簽有四個“狀態(tài)”的先后過程是：a:link ->a:hover ->a:active ->a:visited钥飞。另外，a:active不能設(shè)置有無下劃線（總是有的）衫嵌，下面有個示例大家可以看看

表示所有狀態(tài)下的連接 如 a{color:red}
① a:link：未訪問鏈接 ,如 a:link {color:blue}
② a:visited：已訪問鏈接 ,如 a:visited{color:blue}
③ a:active：激活時（鏈接獲得焦點時）鏈接的顏色 ,如a:active{color:blue}
④ a:hover：鼠標移到鏈接上時 ,如 a:hover {color:blue}
一般a:hover和a:visited鏈接的狀態(tài)（顏色读宙、下劃線等）應(yīng)該是相同的。

 舉例：偽類的常見狀態(tài)值 
代碼如下:
<style type = “text/css”> 
a {font-size:16px} 
a:link {color: blue; text-decoration:none;} //未訪問：藍色楔绞、無下劃線 
a:active:{color: red; } //激活：紅色 
a:visited {color:purple;text-decoration:none;} //已訪問：purple结闸、無下劃線 
a:hover {color: red; text-decoration:underline;} //鼠標移近：紅色、下劃線 
</style> 

js兼容文件

使IE5,IE6兼容到IE7模式（推薦）
<!–[if lt IE 7]><script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script><![endif]–>

使IE5,IE6,IE7兼容到IE8模式
<!–[if lt IE 8]><script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script><![endif]–>

使IE5,IE6,IE7,IE8兼容到IE9模式
<!–[if lt IE 9]><script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script><![endif]–>

瀏覽器識別符

p{ _color:red; } IE6 專用
*html p{ color:#red; } IE6 專用
p{ +color:red; } IE6,7 專用
p{ *color:red; } IE6,7 專用
html p{ color:red; } IE6,7 專用
p{+color: red;} IE7 專用
Body> p{ color: red; } 屏蔽 IE6
p{ color:red\9; } IE8

Firefox: -moz-
Safari: -webkit-
Opera: -o-
IE: -ms-

更多請查看：http://www.jq-school.com/

http://www.w3cfuns.com/notes/18090/961a36d50f2efa676061b5a02c374f75.html