瀏覽器兼容
什么是 CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
談一談瀏覽器兼容的思路
- 要不要做
- BOSS是否有直接要求（是否能說服BOSS不做）
- 產品角度考慮（產品定位的受眾是那些，根據效果和穩定性做取舍，選擇體驗優先還是穩定性優先）
- 成本（有無必要去做）
- 做到什么程度
需要兼容哪些瀏覽器，兼容到什么版本 - 如何來做
- 根據兼容需求選擇技術框架/庫(jquery)
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9) - 根據兼容需求選擇兼容工具
html5shiv.js
respond.js
css reset
normalize.css
Modernizr
postCSS - 條件注釋、CSS Hack、js 能力檢測做一些修補
- 漸進增強和優雅降級的選擇
- 根據兼容需求選擇技術框架/庫(jquery)
列舉5種以上瀏覽器兼容的寫法
- 條件注釋
<!--[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]-->
條件注釋：
條件注釋
-
CSS hack
- 屬性選擇器
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生效- IE條件注釋
<!–-[if IE 7]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![endif]–-> 容器坍塌
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
- inline-block屬性
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
以下工具/名詞是做什么的
條件注釋 /*條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼（IE10以上不再支持條件注釋） */
IE Hack /*主要是針對ie瀏覽器不同版本的特性，編寫適應兼容不同ie瀏覽器的代碼方案 */
js 能力檢測 /*檢測瀏覽器是否支持某種特定的能力，然后給出特定的解決方案 */
html5shiv.js /* 用于解決ie低版本瀏覽器對HTML5新增標簽不識別導致CSS不起作用的腳本*/
respond.js /* 模擬css3的媒體查詢，主要是解決ie低版本瀏覽器不支持媒體查詢，解決低版本瀏覽器的響應式問題*/
css rese /*重新定義標簽樣式，“覆蓋”瀏覽器的CSS默認屬性 */
normalize.css /*可以定制的CSS文件，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一 */
Modernizr /*modernizr是一套JavaScript庫，可以用來檢測瀏覽器對html5和css3的特性有哪些支持哪些不支持 */
postCSS /*postcss是通過JavaScript語言對css語句進行處理，然后再用已選用的插件進行處理和顯示 */
