瀏覽器的相容性問題

2021-10-07 02:52:54 字數 2313 閱讀 1863

常見的browserhacks

​ 具體的可以內容可以參考

由於各個瀏覽器的css預設樣式都不會完全相同,因此最簡單直接有效的方式就是對其進行css樣式初始化。相信很多朋友都寫過這樣的**,在所有css開始前,先把margin和padding都設為0,以防不同瀏覽器的顯示效果不一樣。

*

關於瀏覽器css樣式初始化,對於一些初學者經驗不足的話,可能也不知道應該初始化什麼,這裡給大家推薦乙個庫,可以參考:normalize.css

我們經常會在某個css的屬性前新增一些字首,比如-webkit-,-moz- ,-ms-,這些就是瀏覽器的私有屬性。

為什麼會出現私有屬性呢?這是因為制定html和css標準的組織w3c動作是很慢的。

通常,有w3c組織成員提出乙個新屬性,比如說圓角border-radius,大家都覺得好,但w3c制定標準,要走很複雜的程式,審查等。而瀏覽器商市場推廣時間緊,如果乙個屬性已經夠成熟了,就會在瀏覽器中加入支援。

但是為避免日後w3c公布標準時有所變更,會加入乙個私有字首,比如-webkit-border-radius,通過這種方式來提前支援新屬性。等到日後w3c公布了標準,border-radius的標準寫法確立之後,再讓新版的瀏覽器支援border-radius這種寫法。常用的字首有:

私有屬性 不能解決所有的相容性問題:

要解決的前提條件:保證自己寫的**符合w3c的標準

有時我們需要針對不同的瀏覽器或不同版本寫特定的css樣式,這種針對不同的瀏覽器/不同版本寫相應的css code的過程,叫做css hack!

css hack的寫法大致歸納為3種:條件hack、屬性級hack、選擇符級hack

條件hack

取值

keywords

if後面跟的條件共包含6種選擇方式:是否、大於、大於或等於、小於、小於或等於、非指定版本

是否:指定是否ie或ie某個版本。關鍵字:空

大於:選擇大於指定版本的ie版本。關鍵字:gt(greater than)

大於或等於:選擇大於或等於指定版本的ie版本。關鍵字:gte(greater than or equal)

小於:選擇小於指定版本的ie版本。關鍵字:lt(less than)

小於或等於:選擇小於或等於指定版本的ie版本。關鍵字:lte(less than or equal)

非指定版本:選擇除指定版本外的所有ie版本。關鍵字:!

version

ie瀏覽器版本,如6、7、8

ie10及以上版本已將條件注釋特性移除,使用時需注意

條件hack舉例

屬性hack
selector

.test

選擇符級hack

選擇符級hack是針對一些頁面表現不一致或者需要特殊對待的瀏覽器,在css選擇器前加上一些只有某些特定瀏覽器才能識別的字首進行hack

>

selector

*html *字首只對ie6生效 

*+html *+字首只對ie7生效

@media screen\9只對ie6/7生效

@media \0screen }只對ie8有效

@media \0screen\,screen\9}只對ie6/7/8有效

@media screen\0 } 只對ie8/9/10有效

@media screen and (min-width:0\0) } 只對ie9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) } 只對ie10有效

autoprefixer是一款自動管理瀏覽器字首的外掛程式,它可以解析css檔案並且新增瀏覽器字首到css內容裡,使用can i use(caniuse**)的資料來決定哪些字首是需要的。

把autoprefixer新增到資源構建工具(例如grunt)後,可以完全忘記有關css字首的東西,只需按照最新的w3c規範來正常書寫css即可。如果專案需要支援舊版瀏覽器,可修改browsers引數設定

div

//我們編寫的**

// 自動補全的**,具體補全哪些由要相容的瀏覽器版本決定,可以自行設定

div

大家可以查詢下在專案中是否有自動解決相容性問題的外掛程式,共同解決這個問題

瀏覽器相容性問題

苦惱的區別 1.image repeat 在火狐裡比較正常,可是在ie中一直repeat.背景是乙個關閉的x號,div設定的backgourn image url xx 結果在ie中卻不行,最後找到原因是ie中要顯式的寫上image repeat norepeat這屬性,還有好多的差異,明天 去了 ...

瀏覽器相容性問題

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...

瀏覽器相容性問題

解決方案 應該用ie8相容模式瀏覽網頁,而不應該用ie9或ie10渲染模式.很多使用者安裝ie10後發生很多網頁顯示錯亂,就是相容性的原因,因為ie10預設的渲染模式是ie10.此時應該將其改為ie7渲染模式。為什麼用ie6 7渲染模式的原因如下 中國所有網頁肯定都支援ie,支援ie就是支援ie核心...