1. 什么是 CSS hack
由于不同廠商的瀏覽器拄养,或者是同一廠商的瀏覽器的不同版本岗憋,對CSS的解析認識不完全一樣皱埠,因此會導致生成的頁面效果不一致熏版,得不到我們所需要的頁面效果畔柔。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS氯夷,讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
2.談一談瀏覽器兼容的思路
(1)首先考慮要不要做兼容靶擦。從產(chǎn)品的角度考慮產(chǎn)品的受眾腮考、受眾的瀏覽器比例雇毫、產(chǎn)品是效果有限還是基本功能優(yōu)先;還要考慮成本踩蔚,即有沒有必要做棚放。
(2)如果做兼容,接下來考慮要做到什么程度馅闽。即讓哪些瀏覽器支持哪些效果飘蚯。
(3)如何做兼容。要根據(jù)兼容需求選擇技術框架或庫福也,比如如果要兼容比較舊的瀏覽器(如:IE6,7)局骤,那么現(xiàn)在流行的技術框架顯然不適用,可以選擇1.X版本的JQuery庫暴凑。此外峦甩,還要根據(jù)兼容需求選擇兼容工具,這樣的工具有:html5shiv.js现喳、respond.js凯傲、CSS Reset、Normalize.css嗦篱、Modernizr冰单、Post CSS等;另外默色,還可以考慮使用條件注釋球凰、CSS Hack、JS能力檢測等對兼容做一些修補腿宰。
3.列舉5種以上瀏覽器兼容的寫法
(1)條件注釋:
<pre>
</pre>
(2)屬性前綴法:
<pre>
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie6,7/
color: yellow\9; /ie/edge 6-10/
}
</pre>
(3) 選擇器前綴法
<pre>
span{ /僅ie6/
display: block;
}
</pre>
(4)使用Modernizr
利用Modernizr的能力檢測呕诉,對標簽不存在的能力特別優(yōu)化。
<pre>
<div class="no-textshadow"></div>
.no-textshadow{border:1px solid red;}
</pre>
(5)條件注釋和兼容工具相結(jié)合
<pre>
</pre>
4.以下工具/名詞是做什么的
(1)條件注釋
這是基于HTML源碼中被IE(IE<=9)有條件解釋的語句吃度。條件注釋可被用來向IE提供及隱藏代碼甩挫。
(2)IE Hack
針對IE瀏覽器編寫不同的CSS(屬性前綴法、選擇器前綴法椿每、IE條件注釋法)使得頁面效果在不同版本的IE瀏覽器中達到效果一致伊者。
(3)js 能力檢測
使用JS來檢測瀏覽器擁有的能力而不是來區(qū)分是什么瀏覽器。這樣如果瀏覽器擁有某種能力則提供一種方案间护,沒有某種能力則提供另一種方案亦渗。
(4)html5shiv.js
針對不支持HTML5標簽的瀏覽器,創(chuàng)建并模擬HTML5的標簽的效果并使相應的CSS生效汁尺。
(5)respond.js
為不支持CSS3媒體查詢的瀏覽器(IE6-8)模擬CSS3的媒體查詢法精。
(6)css reset
清除瀏覽器默認的元素樣式。
(7)normalize.css
保護有用的瀏覽器默認樣式;一般化的樣式搂蜓,修復瀏覽器自身的bug并保證各瀏覽器的一致性狼荞;優(yōu)化CSS可用性。
(8)Modernizr
是一個JS類庫帮碰,用來檢測瀏覽器的CSS3和HTML5能力相味,從而解決瀏覽器的兼容問題。
(9)postCSS
利用JS插件轉(zhuǎn)換CSS殉挽》嵘妫可以將CSS解析成抽象語法樹。
5.一般在哪個網(wǎng)站查詢屬性兼容性此再?
http://caniuse.com/