何解決瀏覽器兼容性問題？ 是否可以通過調整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{...}只對IE6/7生效

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

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

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

@media screen and (min-width:0>@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效<) {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;}

當今多樣化的瀏覽器環境中，網頁在不同瀏覽器中都能正常顯示和運行是前端開發者的一大挑戰。瀏覽器兼容性問題不僅影響用戶體驗，還可能導致功能無法正常使用。下面為大家分享幾種有效解決瀏覽器兼容問題的方法。

1. 使用標準化的HTML和CSS

確保代碼符合最新的HTML和CSS標準是解決兼容性問題的基礎。使用W3C驗證工具檢查和修復代碼中的錯誤，可以減少因不標準的代碼導致的兼容性問題。

2. 使用CSS重置或歸一化

不同瀏覽器對默認樣式的處理存在差異，使用CSS重置（Reset CSS）或歸一化（Normalize.css）可以消除這些差異，提供一致的起點。Normalize.css相較于Reset CSS，更加溫和地處理默認樣式，推薦使用。

3. JavaScript庫和框架

使用現代JavaScript庫和框架如jQuery、React、Vue等，可以簡化跨瀏覽器的DOM操作和事件處理。這些庫和框架通常已經解決了大部分兼容性問題。

4. 前綴處理

某些CSS3特性在不同瀏覽器中的支持情況不同，需要添加瀏覽器前綴。使用Autoprefixer等工具可以自動為CSS代碼添加必要的前綴，確保在各個瀏覽器中的兼容性。

5. 響應式設計

使用媒體查詢和響應式設計技術，確保網頁在不同設備和瀏覽器窗口大小下都能正常顯示。Bootstrap、Foundation等前端框架提供了豐富的響應式設計組件，幫助快速實現兼容性。

6. 條件注釋

針對IE瀏覽器的特定版本，可以使用條件注釋來加載特定的CSS或JavaScript代碼，修復在這些瀏覽器中的兼容性問題。雖然這種方法現在較少使用，但在處理老舊版本的IE時仍然有效。

7. Polyfill和Shim

Polyfill和Shim是用于在較舊的瀏覽器中實現現代API和功能的代碼片段。Modernizr可以檢測瀏覽器對HTML5和CSS3特性的支持情況，并根據檢測結果加載相應的Polyfill。

8. 瀏覽器開發者工具

利用瀏覽器自帶的開發者工具（如Chrome DevTools、Firefox Developer Tools等），可以快速調試和修復兼容性問題。這些工具提供了豐富的調試功能，包括元素檢查、網絡請求分析、JavaScript調試等。

解決瀏覽器兼容問題需要綜合運用多種方法，使用這些工具和技術，可以有效提升網頁在不同瀏覽器中的兼容性。711Proxy提供純凈住宅代理，支持多種業務需求。