- 什么是css hack
由于不同廠(chǎng)商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對(duì)CSS的支持硫麻、解析不一樣默穴,導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁(yè)面展現(xiàn)效果三热。這時(shí)念祭,我們?yōu)榱双@得統(tǒng)一的頁(yè)面效果,就需要針對(duì)不同的瀏覽器或不同版本寫(xiě)特定的CSS樣式启上,我們把這個(gè)針對(duì)不同的瀏覽器/不同版本寫(xiě)相應(yīng)的CSS code的過(guò)程邢隧,叫做CSS hack!
條件注釋是于HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可用來(lái)被向IE提供或隱藏代碼碧绞。
-
談一談瀏覽器兼容的思路
要不要做- 產(chǎn)品的角度(產(chǎn)品的受眾巫员、受眾的瀏覽器比例桐腌、效果優(yōu)先還是基本功能優(yōu)先,成本的角度 (有無(wú)必要做某件事)
做到什么程度 - 讓哪些瀏覽器支持哪些效果
如何做
根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)
根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset熊镣、normalize.css嚎莉、Modernizr)
postCSS - 條件注釋悯搔、CSS Hack灾常、js 能力檢測(cè)做一些修補(bǔ)
- 產(chǎn)品的角度(產(chǎn)品的受眾巫员、受眾的瀏覽器比例桐腌、效果優(yōu)先還是基本功能優(yōu)先,成本的角度 (有無(wú)必要做某件事)
列舉5種以上瀏覽器兼容的寫(xiě)法
- 加載ie7的css
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
- 使用ie6或ie7才識(shí)別的前綴
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}
- clearfix對(duì)ie7的兼容.:after和:before只在ie8及以上有效
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1; / 僅對(duì)ie67有效 */
}
- 針對(duì)ie67來(lái)兼容inline-block。ie67識(shí)別 "*"前綴
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- 使用IE注釋的方法來(lái)處理IE10以下的IE兼容发魄。加載一些兼容的庫(kù)盹牧。
- 使用IE注釋的方法來(lái)處理IE10以下的IE兼容俩垃。加載一些兼容的庫(kù)。
- 以下工具/名詞是做什么的
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語(yǔ)句汰寓。條件注釋可被用來(lái)向IE提供及隱藏代碼口柳。
使用了條件注釋的頁(yè)面在 Windows Internet Explorer 9 中可正常工作,但在 Internet Explorer 10 中無(wú)法正常工作有滑。IE10不再支持條件注釋IE Hack
利用條件注釋來(lái)達(dá)到只有ie才能識(shí)別的代碼跃闹,來(lái)達(dá)到實(shí)現(xiàn)兼容的目的。js 能力檢測(cè)
js的兼容性的檢測(cè)毛好,查看是否有這個(gè)api望艺,來(lái)判斷是否能用。html5shiv.js
為ie6-9肌访、Safari 4.x (and iPhone 3.x), 和 Firefox 3.x.支持html5的標(biāo)簽respond.js
為IE6-8和一些不支持CSS3媒體查詢(xún)的瀏覽器提供支持找默,達(dá)到響應(yīng)的目的。css reset
對(duì)標(biāo)簽的默認(rèn)樣式進(jìn)行重置normalize.css
在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性吼驶,是一種現(xiàn)代的惩激、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案Modernizr
瀏覽器兼容。幫助探測(cè)瀏覽器是否支持HTML5/CSS3特性蟹演,從而判斷是否使用咧欣。甚至可以加載額外的script腳本。
前端的瑞士軍刀Modernizr.jspostCSS
使用js插件來(lái)轉(zhuǎn)換樣式的工具轨帜。可以自動(dòng)為樣式加上兼容的屬性衩椒。
- 一般在哪個(gè)網(wǎng)站查詢(xún)屬性兼容性蚌父?