瀏覽器hack總結 詳細的瀏覽器相容性解決方法

2022-03-04 13:37:52 字數 1569 閱讀 3163

由於各瀏覽器對頁面的解析不同,會導致頁面在不同瀏覽器中顯示的樣式不一致,為了保持頁面的統一,經常需要對瀏覽器進行相容性問題的除錯。

面對瀏覽器諸多的相容性問題,經常需要通過css樣式來除錯,其中用的最多的就是css hack。所謂css hack就是針對不同的瀏覽器書寫不同的css樣式,通過使用某個瀏覽器單獨識別的樣式**,控制該瀏覽器的顯示效果。css hack主要分為兩類

css選擇器hack是指通過在css選擇器的前面,加上一些只有特定瀏覽器才能識別的hack字首,來控制不同的css樣式。針對不同版本的瀏覽器,選擇器hack分為以下幾類:

(1)ie6及ie6以下版本識別的選擇器hack

書寫css樣式時,如果希望此樣式只對ie6及ie6以下版本的瀏覽器生效,可以使用ie6及以下版本的選擇器hack,其基本語法如下:

* html 選擇器

(2)ie7識別的選擇器hack

書寫css樣式時,如果希望此樣式只對ie7瀏覽器生效,可以使用ie7識別的選擇器hack,其基本語法如下:

*+html 選擇器

這裡小強老師,把屬性hack分為 字首屬性hack和 字尾屬性hack

css屬性hack(字首)

針對的瀏覽器

_color:red;

ie6及其以下的版本

*color:red ;或者 +color:red;

ie7及其以下的版本

css屬性hack(字尾)

針對的瀏覽器

color:red\9;

ie6/ie7/ie8/ie9/ie10版本

color:red\0;

ie8/ie9/ie10版本

color:red\9\0;

ie9/ie10

color:red!important

ie7/ie8/ie9/ie10及其他非ie瀏覽器

其實,現在越來越的公司,不太讓相容ie6了,現在比較關心的是ie8.910等高版本的瀏覽器,因此這裡小強老師也總結了ie專屬hack ,比如ie8等。

選擇器hack寫法

針對於的瀏覽器

@media screen\9}

只對ie6/7生效

@media \0screen }

只對ie8生效

@media \0screen\,screen\9}

只對ie6/7/8有效

@media screen\0 }

只對ie8/9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) }

只對ie10有效

如果樣式比較多,條件注釋,是不錯的選擇:

ie條件注釋語句

針對的瀏覽器版本

ie7 以下版本

ie7及以下版本(包含ie7)

ie7 以上版本

ie7及以上版本(包含ie7)

非ie7版本

您使用不是 internet explorer

非ie瀏覽器

瀏覽器專用HACK

第乙個hack,ie ff 所有瀏覽器 公用 height 100px 第二個hack ie6專用 height 100px 第三個hack ie6 ie7公用 height 100px height 100px 介紹完了這三個hack了,下面我們再來看看如何在乙個樣式裡分別給乙個屬性定義ie6 i...

主流瀏覽器相容HACK

propertyname value和單位 9 僅ie8識別 propertyname value 單位 selector ie7識別 propertyname value 單位 ie6識別 safari和 chrome 使用 media screen and webkit min device p...

hack 瀏覽器相容css hack)

1.hack的原理 由於不同的瀏覽器對css的支援及解析結果不一樣,還由於css中的優先順序的關係。我們就可以根據這個來針對不同的瀏覽器來寫不同的css。css hack大致有3種表現形式,css類內部hack 選擇器hack以及html頭部引用 if ie hack,css hack主要針對類內部...