前端開發中，浏覽器相容問題如何解決？

如何解決浏覽器相容性問題？ 是否可以通過調整css解決浏覽器相容性問題？

讓我們來看看。 用這四個解決方案解決CSS浏覽器的相容性問題吧。

對我們來說，網絡前端既是高薪專家，同時也是艱苦職業。 不僅是因為技術的更新換代快，更因為應該學習的知識比什麼都多。 要解決所有的浏覽器相容性問題并不是一件容易的事，尤其是在浏覽器普及到網際網路的情況下。

解決CSS浏覽器相容性問題的四種解決方案

為什麼會有浏覽器相容性問題？

不是因為浏覽器制造商太多！

Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9.360安全浏覽器，qq浏覽器，世界之窗，TT，Sogou，opera，maxthon

重要的是，即使是不同制造商、甚至同一制造商的不同版本，對同一段的CSS的分析效果也不一緻。 這樣會導緻頁面顯示效果不一緻，還會産生相容性問題。

多麼希望Chrome能統一江湖啊~

解決CSS浏覽器相容性問題的四種解決方案

按浏覽器列出的目前市場占有率

浏覽器這麼多，我們都不是相容的。 對于使用者數一般的産品，隻要做好主流浏覽器的比對就可以了。

百度流量研究院提供的2018年8月至2019年2月的資料顯示，Chrome占46.28%，IE類仍然占很大比重，反正任重道遠啊~

解決CSS浏覽器相容性問題的四種解決方案

CSS浏覽器相容性問題的解決方案和解決方案

今天，我不想關注太多細節的問題。 例如，該css樣式需要相容性，但希望研究較大的解決方案。 主要包括四個方面：浏覽器css風格初始化、浏覽器私有屬性、CSS hack文法和自動化插件。

1 .初始化浏覽器CSS樣式

因為每個浏覽器的css預設樣式都不一樣，是以最簡單有效的方法是對其進行初始化。 我相信很多朋友都寫過這樣的代碼，在所有的css開始之前，将marin和padding設定為0以避免不同的浏覽器顯示效果不同。

*{

邊距： 0；

padding: 0；

}

關于浏覽器CSS樣式的初始化，如果沒有豐富的經驗，可能不知道該初始化什麼。 在此，建議使用Normalize.css。 github star的數量接近3.4萬，從中選擇了幾種樣式設定進行展示。 如下所示

html {

行高： 1.15；/* correctthelineheightinallbrowsers * /

- web kit-text-size-adjust :100；/* preventadjustmentsoffontsizeafterorientationchangesinios.* /

}

body {

邊距： 0；

}

a {

背景顔色：傳輸；/* removethegraybackgroundonactivelinksinie 10.* /

}

img {

border-style: none；/* removetheborderonimagesinsidelinksinie 10.* /

}

我相信初始化CSS樣式可以解決許多常見的相容性問題，接下來我們來看看浏覽器的專用屬性。

2 .浏覽器的專用屬性

我們在常見的CSS屬性前添加-webkit-、-moz--ms--等字首。 這些是浏覽器的專用屬性。

為什麼會出現私人屬性呢？ 這是因為制定了HTML和CSS标準的組織W3C動作緩慢。

通常，一個W3C組織的成員會提出一些新的屬性，如圓角border-radius，大家都認為很好，但W3C必須制定标準，進行複雜的流程、稽核等。 浏覽器制造商的營銷很花時間，如果一個屬性足夠成熟，就會給浏覽器增加支援。

但是，通過添加專用字首(如-webkit-border-radius )來預支援新屬性，以避免在以後W3C釋出标準時發生更改。 日後W3C會公布标準，建立border-radius的标準格式，然後讓新版本的浏覽器支援border-radius格式。 一般字首如下

-moz表示firefox浏覽器的專用屬性

-ms表示IE浏覽器的專用屬性

-webkit表示chrome，safari的私有屬性

-o表示opera的私有屬性

注意私有屬性的順序，在标準表示法的最後，将互換表示法放在前面

- WebKit-transform : rotate (-3d eg )； /*是Chrome/Safari*/

-moz-transform3360rotate(-3DEG )； /*是Firefox*/

-ms-transform3360rotate(-3DEG )； /*是IE*/

-o-transform3360rotate(-3DEG )； /*是Opera*/

transform:rotate(-3deg )；

為每個CSS屬性編寫這樣的相容性代碼，無疑是對生命最大的浪費。 稍後我将介紹如何在自動化插件中處理它。

3. CSS hack

您可能需要為不同的浏覽器或不同的版本編寫特定的CSS樣式。 為這種不同的浏覽器/不同的版本編寫相應的CSS代碼的過程稱為CSS hack！

CSS hack的寫法大緻分為條件hack、屬性電平hack和選擇器電平hack三種。

條件hack

條件hack主要對IE浏覽器進行特殊設定

文法：

取得價格

keywords

if後面的條件有六個選擇：“否”、“大于”、“大于或等于”、“小于或等于”、“小于或等于”和“非指定版本”

否：指定是IE還是IE的版本。 關鍵字：空

大于-選擇大于指定版本的IE版本。 關鍵詞： gt(greaterthan ) ) ) ) ) ) ) )。

大于或等于：選擇大于或等于指定版本的IE版本。 關鍵字： GTE(greaterthanorequal ) )。

小于：選擇小于指定版本的IE版本。 關鍵字： lt(lessthan ) )。

小于或等于：選擇小于或等于指定版本的IE版本。 關鍵字： LTE(lessthanorequal ) )

非指定版本：選擇除指定版本外的所有IE版本。 關鍵字：

version

IE浏覽器版本，如6、7、8

IE10及以上版本已将條件注釋特性移除，使用時需注意。

§ 舉例

<!--[if IE]>

<p>你在非IE中将看不到我的身影</p>

<![endif]-->

<!--[if IE]>

<style>

.test{color:red;}

</style>

<![endif]-->

<!--[if lt IE 9]>

<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

屬性級hack

屬性hack就是在CSS樣式屬性名前加上一些隻有特定浏覽器才能識别的hack字首。

§ 文法：

selector{<hack>?property:value<hack>?;}

§ 取值：

：選擇IE6及以下。連接配接線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，是以使用下劃線（）更為合适。

：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業界對（）的認知度更高

9：選擇IE6+

：選擇IE8+和Opera15以下的浏覽器

§ 舉例

如在不同的IE浏覽器中設定不同的顔色，注意順序：低版本的相容性寫法放到最後

.test {

color: #0909; /* For IE8+ */

*color: #f00; /* For IE7 and earlier */

_color: #ff0; /* For IE6 and earlier */

}

選擇符級hack

選擇符級hack是針對一些頁面表現不一緻或者需要特殊對待的浏覽器，在CSS選擇器前加上一些隻有某些特定浏覽器才能識别的字首進行hack。

§ 文法：

<hack> selector{ sRules }

§ 取值：

§ 常見的選擇符級hack有

*html *字首隻對IE6生效

*+html *+字首隻對IE7生效

@media screen\9{...}隻對IE6/7生效

@media \0screen {body { background: red; }}隻對IE8有效

@media \0screen\,screen\9{body { background: blue; }}隻對IE6/7/8有效

@media screen\0 {body { background: green; }} 隻對IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 隻對IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 隻對IE10有效

§ 舉例：

* html .test { color: #090; } /* For IE6 and earlier */

* + html .test { color: #ff0; } /* For IE7 */

看到這裡，我不得不為前端人員自豪，這也太難了吧~~

不過花大力氣解決這些相容性問題， 并不能給我們技術上帶來什麼大的提升，無非是給各個浏覽器廠商填坑罷了，随着時間的流逝，這些技術的價值也會越來越小，怎麼花最小的力氣解決css相容性問題，讓我們把更多的時間留給美好的生活，才是關鍵，好在有一些自動化插件可以幫我們從繁重的相容性進行中解脫處理。

4. 自動化插件

Autoprefixer是一款自動管理浏覽器字首的插件，它可以解析CSS檔案并且添加浏覽器字首到CSS内容裡，使用Can I Use（caniuse網站）的資料來決定哪些字首是需要的。

把Autoprefixer添加到資源建構工具（例如Grunt）後，可以完全忘記有關CSS字首的東西，隻需按照最新的W3C規範來正常書寫CSS即可。如果項目需要支援舊版浏覽器，可修改browsers參數設定 。

//我們編寫的代碼

div {

transform: rotate(30deg);

}

// 自動補全的代碼，具體補全哪些由要相容的浏覽器版本決定，可以自行設定

div {

-ms-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-o-transform: rotate(30deg);

-moz-transform: rotate(30deg);

transform: rotate(30deg);

}

目前webpack、gulp、grunt都有相應的插件，如果還沒有使用，那就趕緊應用到我們的項目中吧，别再讓CSS相容性浪費你的時間！

常見的浏覽器相容性問題與解決方案——CSS篇

1、不同的浏覽器的标簽預設的外更新檔和内更新檔不同

問題症狀：随便寫幾個标簽，不加樣式控制的情況下，各自的margin和padding差異較大。

碰到頻率：100%

解決方案：初始化CSS的預設樣式，*{margin:0;padding:0}。也可以使用其他網站的初始化代碼。

備注：這個是最常見的也是最容易解決的一個浏覽器相容性問題。

2、塊屬性标簽float後，又有橫行的margin情況下，在IE6顯示margin比設定的大

問題症狀：常見的是IE6中後面的一塊被頂到下一行。

碰到頻率：90%

解決方案：在float的标簽樣式控制中加入display:inline；将其轉化為行内屬性。

3、設定較小高度标簽，在IE6、IE7和遨遊浏覽器中高度超出自己設定的高度

問題症狀：IE6、IE7和遨遊浏覽器裡這個标簽的高度不受控制，超出自己設定的高度。

碰到頻率：60%

解決方案：給超出高度的标簽設定overflow：hidden；或者設定行高line-height小于你設定的高度。

4、行内屬性标簽，設定display：block後采用float布局，又有橫行的margin的情況，IE6間距bug

問題症狀：IE6裡的間距比超過設定的間距。

碰到頻率：20%

解決方案：在display：block；後面加入display：inline；display：table；

5、圖檔預設有間距

問題症狀：幾個img标簽放在一起的時候，有些浏覽器會有預設的間距，加了margin：0；和padding：0也不起作用。

碰到頻率：20%

解決方案：使用float屬性為img布局。

6、标簽最低高度設定min-height不相容

問題症狀：因為min-height本身就是一個不相容的CSS屬性，是以設定min-height時不能很好的被各個浏覽器相容。

碰到頻率：20%

解決方案：如果我們需要設定一個标簽的最小高度是200px，需要進行的設定為：{min-height:200px;height:auto !importtant;height:200px;overflow:visible;}