瀏覽器兼容

什么是 CSS hack

  • 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等体谒,或者是同一廠商的瀏覽器的不同版本但校,如IE6和IE7,對CSS的解析認(rèn)識不完全一樣,因此會導(dǎo)致生成的頁面效果不一樣,得不到我們所需要的頁面效果胡野。這時就需要針對不同的瀏覽器去寫不同的CSS,讓它能在不同的瀏覽器中也能得到我們想要的頁面效果痕鳍。
  • CSS Hack大致有3種表現(xiàn)形式,CSS屬性前綴法龙巨、選擇器前綴法以及IE條件注釋法(即HTML頭部引用if IE)Hack笼呆,實(shí)際項(xiàng)目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。
  • 屬性前綴法(即類內(nèi)部Hack):例如 IE6能識別下劃線""和星號" * "旨别,IE7能識別星號" * "诗赌,但不能識別下劃線"",IE6~IE10都認(rèn)識"\9"秸弛,但firefox前述三個都不能認(rèn)識
  • 選擇器前綴法(即選擇器Hack)
  • IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經(jīng)不再支持條件注釋): 铭若,針對IE6及以下版本:。這類Hack不僅對CSS生效递览,對寫在判斷語句里面的所有代碼都會生效

談一談瀏覽器兼容的思路

  • 要不要做
  • 產(chǎn)品的角度(產(chǎn)品的受眾叼屠、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先)
  • 成本的角度 (有無必要做某件事)
  • 做到什么程度
  • 讓哪些瀏覽器支持哪些效果
  • 如何做

列舉5種以上瀏覽器兼容的寫法

  • 條件注釋
項(xiàng)目 范例 說明
[if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7
l [if (IE 6)l(IE 7)] IE6或者IE7
  • CSS hack
    常見hack寫法
.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

以下工具/名詞是做什么的

  • 條件注釋
    條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句颓影。條件注釋可被用來向IE提供及隱藏代碼
  • IE Hack
    使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼各淀,有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法
  • js 能力檢測
    使用JS的語法檢測瀏覽器支持的屬性诡挂,以便展示效果
  • html5shiv.js
    用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別碎浇,并導(dǎo)致CSS不起作用的問題
  • respond.js
    讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢
  • css reset
    通過重新定義標(biāo)簽樣式,“覆蓋”瀏覽器的CSS默認(rèn)屬性
  • normalize.css
    Normalize.css 只是一個很小的CSS文件咆畏,但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性南捂。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現(xiàn)代的旧找、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案
  • Modernizr
    Modernizr是一個 JavaScript 庫溺健,用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性
  • postCSS
    PostCSS是一個JS插件轉(zhuǎn)換樣式表的工具。這些插件能夠檢驗(yàn)我們的CSS钮蛛、支持變量和混合鞭缭,轉(zhuǎn)化css3的新特性語法、行內(nèi)圖片等

一般在哪個網(wǎng)站查詢屬性兼容性魏颓?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末岭辣,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子甸饱,更是在濱河造成了極大的恐慌沦童,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叹话,死亡現(xiàn)場離奇詭異偷遗,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)驼壶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進(jìn)店門氏豌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人热凹,你說我怎么就攤上這事泵喘。” “怎么了般妙?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵纪铺,是天一觀的道長。 經(jīng)常有香客問我股冗,道長霹陡,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮烹棉,結(jié)果婚禮上攒霹,老公的妹妹穿的比我還像新娘。我一直安慰自己浆洗,他們只是感情好催束,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著伏社,像睡著了一般抠刺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上摘昌,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天速妖,我揣著相機(jī)與錄音,去河邊找鬼聪黎。 笑死罕容,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的稿饰。 我是一名探鬼主播锦秒,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼喉镰!你這毒婦竟也來了旅择?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤侣姆,失蹤者是張志新(化名)和其女友劉穎生真,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捺宗,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡汇歹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了偿凭。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡派歌,死狀恐怖弯囊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情胶果,我是刑警寧澤匾嘱,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站早抠,受9級特大地震影響霎烙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一悬垃、第九天 我趴在偏房一處隱蔽的房頂上張望游昼。 院中可真熱鬧,春花似錦尝蠕、人聲如沸烘豌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽廊佩。三九已至,卻和暖如春靖榕,著一層夾襖步出監(jiān)牢的瞬間标锄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工茁计, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留料皇,地道東北人。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓簸淀,卻偏偏與公主長得像瓶蝴,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子租幕,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號舷手,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 387評論 0 1
  • CSS Hack 不同的瀏覽器對某些CSS代碼解析會存在一定的差異,因此就會導(dǎo)致不同瀏覽器下給用戶展示的頁面效果不...
    zx9426閱讀 386評論 0 0
  • 一劲绪、如何調(diào)試 IE 瀏覽器 IE7以上版本自帶的開發(fā)者工具男窟,IE6可以用border的方法;例:IE11的開發(fā)者工...
    __Qiao閱讀 1,127評論 2 17
  • 一贾富、問答部分 1. 如何調(diào)試 IE 瀏覽器 IE7及以上版本有調(diào)試臺歉眷,可以按F12啟動。Paste_Image.p...
    _hello__world_閱讀 464評論 0 1
  • 本·霍洛維茨(Ben Horowitz)五月份在哥倫比亞大學(xué)發(fā)表了一個畢業(yè)典禮演講颤枪。 霍洛維茨是經(jīng)歷過各種困難汗捡,而...
    曉健周閱讀 1,162評論 1 4