- IE條件注釋
- 屬性選擇器
- 選擇器前綴法
- 使用兼容工具
- js 修補
兼容問題查詢網(wǎng)站: http://www.caniuse.com
IE條件注釋
是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
(注:IE10不再支持條件注釋)
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
瀏覽器符合哪一條噪径,那條就生效京郑。
屬性選擇器
例如 IE6能識別下劃線和星號也搓,IE7能識別星號敢茁,但不能識別下劃線漠其,IE6~IE10都認識"\9"屑迂,但firefox前述三個都不能認識诡渴。
box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
選擇器前綴法
原理與屬性選擇器類似捐晶,在選擇器前加前綴,只有某些瀏覽器能識別妄辩,以此來針對性的生效惑灵。
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等
使用兼容工具
-
html5shiv.js
IE9以下版本瀏覽器對HTML5新增標簽不識別,并導(dǎo)致CSS不起作用的問題眼耀。所以我們在使用過程中英支,想要讓低版本的瀏覽器,即IE9以下的瀏覽器支持哮伟,可以使用該工具干花! -
respond.js
IE6-8等老版本的瀏覽器不支持CSS3的媒體查詢功能,那么就可以用這個工具楞黄,用 js 去實現(xiàn)響應(yīng)式池凄。 -
css reset
對瀏覽器的默認樣式全部重置,全部推倒重來鬼廓。 -
normalize.css
標準化CSS肿仑,讓不同瀏覽器的CSS樣式統(tǒng)一。 -
Modernizr
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS桑阶,無論瀏覽器是否支持這些特性柏副。這是處理漸進增強的完美方案。
Modernizr 會在頁面加載后立即檢測特性蚣录;然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象割择,同時在 html 元素加入方便你調(diào)整 CSS 的 class 名。
js 修補
一些簡單的兼容問題萎河,可以自己寫一段 js 代碼去實現(xiàn)該功能