天天看點
傳回

Web前段開發人員須知的常見浏覽器相容性問題及解決技巧

為什麼會有相容性問題？

由于市場上浏覽器種類衆多，而不同浏覽器其核心亦不盡相同，是以各個浏覽器對網頁的解析就有一定出入，這也是導緻浏覽器相容問題出現的主要原因，我們的網頁需要在主流浏覽器上正常運作，就需要做好浏覽器相容。

使用Trident核心的浏覽器：IE、Maxthon、TT； 使用Gecko核心的浏覽器：Netcape6及以上版本、FireFox； 使用Presto核心的浏覽器：Opera7及以上版本； 使用Webkit核心的浏覽器：Safari、Chrome。 

而我現在所說的相容性問題，主要是說IE與幾個主流浏覽器如firefox，google等。而對IE浏覽器來說，IE7又是個跨度，因為之前的版本更新甚慢，bug甚多。從IE8開始，IE浏覽器漸漸遵循标準，到IE9後由于大家都一緻認為标準很重要，可以說在相容性上比較好了，但是在中國來說，由于xp的占有率問題，使用IE7以下的使用者仍然很多，是以我們不得不考慮低版本浏覽器的相容。

對浏覽器相容問題，一般分，HTML，Javascript相容，CSS相容。 其中html相關問題比較容易處理，無非是高版本浏覽器用了低版本浏覽器無法識别的元素，導緻其不能解析，是以平時注意一點就是。特别是HTML5增加了許多新标簽，低版本浏覽器有點影響時代進步啊

問題一：不同浏覽器的标簽預設的外更新檔和内更新檔不同

  1. 問題症狀：随便寫幾個标簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
  2. 碰到頻率:100%
  3. 解決方案：css裡 

    *{margin:0;padding:0;}
  4. 備注：這個是最常見的也是最易解決的一個浏覽器相容性問題，幾乎所有的css檔案開頭都會用通配符*來設定各個标簽的内外更新檔是0。

問題二：塊屬性标簽float後，又有橫行的margin情況下，在ie6顯示margin比設定的大

  1. 問題症狀:常見症狀是ie6中後面的一塊被頂到下一行
  2. 碰到頻率：90%（稍微複雜點的頁面都會碰到，float布局最常見的浏覽器相容問題）
  3. 解決方案：在float的标簽樣式控制中加入 display:inline;将其轉化為行内屬性
  4. 備注：我們最常用的就是div+css布局了，而div就是一個典型的塊屬性标簽，橫向布局的時候我們通常都是用div float實作的，橫向的間距設定如果用margin實作，這就是一個必然會碰到的相容性問題。

問題三：設定較小高度标簽（一般小于10px），在ie6，ie7，遨遊中高度超出自己設定高度

  1. 問題症狀：ie6、7和遨遊裡這個标簽的高度不受控制，超出自己設定的高度
  2. 碰到頻率：60%
  3. 解決方案：給超出高度的标簽設定overflow:hidden;或者設定行高line-height 小于你設定的高度。
  4. 備注：這種情況一般出現在我們設定小圓角背景的标簽裡。出現這個問題的原因是ie8之前的浏覽器都會給标簽一個最小預設的行高的高度。即使你的标簽是空的，這個标簽的高度還是會達到預設的行高。

問題四：行内屬性标簽，設定display:block後采用float布局，又有橫行的margin的情況，ie6間距bug（類似第二種）

  1. 問題症狀：ie6裡的間距比超過設定的間距
  2. 碰到幾率：20%
  3. 解決方案：在display:block;後面加入display:inline;display:table;
  4. 備注：行内屬性标簽，為了設定寬高，我們需要設定display:block;(除了input标簽比較特殊)。在用float布局并有橫向的margin後，在ie6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行内屬性标簽，是以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

問題五：圖檔預設有間距

  1. 問題症狀：幾個img标簽放在一起的時候，有些浏覽器會有預設的間距，加上問題一中提到的通配符也不起作用。
  2. 碰到幾率：20%
  3. 解決方案：使用float屬性為img布局
  4. 備注：因為img标簽是行内屬性标簽，是以隻要不超出容器寬度，img标簽都會排在一行裡，但是部分浏覽器的img标簽之間會有個間距。去掉這個間距使用float是正道

問題六：标簽最低高度設定min-height不相容

  1. 問題症狀：因為min-height本身就是一個不相容的css屬性，是以設定min-height時不能很好的被各個浏覽器相容
  2. 碰到幾率：5%
  3. 解決方案：如果我們要設定一個标簽的最小高度200px，需要進行的設定為：

    {min-height:200px; height:auto !important; height:200px; overflow:visible;}
  4. 備注：在B/S系統前端開時，有很多情況下我們有這種需求。當内容小于一個值（如300px）時。容器的高度為300px；當内容高度大于這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個相容性問題。

問題七：透明度的相容css設定

方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的浏覽器中看是否相容，當然熟練到一定的程度就沒這麼麻煩了。建議經常會碰到相容性問題的新手使用。很多相容性問題都是因為浏覽器對标簽的預設屬性解析不同造成的，隻要我們稍加設定都能輕松地解決這些相容問題。如果我們熟悉标簽的預設屬性的話，就能很好的了解為什麼會出現相容問題以及怎麼去解決這些相容問題。

技巧一：css hack

使用hacker 我可以把浏覽器分為3類：ie6 ；ie7和遨遊；其他（ie8 chrome ff safari opera等）

  1. ie6認識的hacker 是下劃線_ 和星号 *
  2. ie7 遨遊認識的hacker是星号 * （包括上面問題6中的 !important也算是hack的一種。不過實用性較小。）

比如這樣一個css設定 height:300px;*height:200px;_height:100px;

ie6浏覽器在讀到 height:300px的時候會認為高時300px；繼續往下讀，他也認識*heihgt， 是以當ie6讀到*height:200px的時候會覆寫掉前一條的相沖突設定，認為高度是200px。繼續往下讀，ie6還認識_height,是以他又會覆寫掉200px高的設定，把高度設定為100px；

ie7和遨遊也是一樣的從高度300px的設定往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。是以它們會把高度解析為200px；

剩下的浏覽器隻認識第一個height:300px;是以他們會把高度解析為300px。

因為優先級相同且相沖突的屬性設定後一個會覆寫掉前一個，是以書寫的次序是很重要的。

/* CSS屬性級Hack */ 
color:red; /* 所有浏覽器可識别*/

_color:red; /* 僅IE6 識别 */

*color:red; /* IE6、IE7 識别 */

+color:red; /* IE6、IE7 識别 */

*+color:red; /* IE6、IE7 識别 */

[color:red; /* IE6、IE7 識别 */ 

color:red\9; /* IE6、IE7、IE8、IE9 識别 */

color:red\0; /* IE8、IE9 識别*/

color:red\9\0; /* 僅IE9識别 */

color:red \0; /* 僅IE9識别 */

color:red!important; /* IE6 不識别!important 有危險*/

/* CSS選擇符級Hack */ 
*html #demo { color:red;} /* 僅IE6 識别 */

*+html #demo { color:red;} /* 僅IE7 識别 */

body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以識别 
*/ 
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以識别 */

:root #demo { color:red\9; } : /* 僅IE9識别 */

越少的浮動，就會越少的代碼，會有更靈活的頁面，會有擴充性更強的頁面。這不多說，歸結為到一定水準了，浮動會用的較少。另外，您也會避免使用浮動+margin的用法。是以，越後來越不易遇到這種bug。

技巧二：padding，marign，height，width

注意是技巧，不是方法： 寫好标準頭 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> http://www.w3.org/1999/xhtml”> 盡量用padding，慎用margin，height盡量補上100%，父級height有定值子級height不用100%，子級全為浮動時底部補個空clear:both的div寬盡量用margin，慎用padding，width算準實際要的減去padding。

技巧三：顯示類（display:block,inline）

display:block,inline兩個元素

display:block; //可以為内嵌元素模拟為塊元素

display:inline; //實作同一行排列的的效果

display:table; //for FF,模拟table的效果

display:block塊元素，元素的特點是： 總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度預設是它的容器的100%，除非設定一個寬度

display:inline就是将元素顯示為行内元素，元素的特點是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖檔的寬度，不可改變。span，a，label，input，img，strong和em是 inline 元素的例子。

技巧四：怎樣使一個div層居中于浏覽器中？

1.

<style type="text/css">

<!-- div {

position:absolute;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

width:200px;

height:200px;

border:1px solid red; } -->

</style>

2.div裡的内容，IE預設為居中，而FF預設為左對齊，可以嘗試增加代碼margin: 0 auto;

技巧五：float的div閉合;清除浮動;自适應高度

① 例如：

＜div id="floatA">＜div id="floatB">＜div id="NOTfloatC">
  • 這裡的NOTfloatC并不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設定為float:left;)
  • 這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float标簽，必須将float标簽閉合。在

    ＜divclass="floatB">＜div class="NOTfloatC">

     之間加上

    ＜div class="clear">

     這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會産生異常。并且将clear這種樣式定義為為如下即可：.clear{clear:both;}

②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自适應，要在wrapper裡面加上overflow:hidden; 當包含float的box的時候，高度自适應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了相容。 

例如某一個wrapper如下定義：

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

③對于排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如:

<div id=”page”>

<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>

</div>

比如我們要将page的背景設定成藍色,以達到所有三欄的背景顔色是藍色的目的,但是我們會發現随着left centerright的向下拉長,而page居然儲存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設定成float,是以我們應該這樣解決：

<div id=”page”>

<div id=”bg” style=”float:left;width:100%”>

<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>

</div>

</div>

再嵌入一個float left而寬度是100%的DIV解決之。

④萬能float 閉合(非常重要!)

關于 clear float 的原理可參見 [How To ClearFloats Without Structural Markup],将以下代碼加入Global CSS 中,給需要閉合的div加上class=”clearfix”即可,屢試不爽。

/* Clear Fix */ 
.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } 
.clearfix { display:inline-block; } 
/* Hide from IE Mac */ 
.clearfix {display:block;} 
/* End hide from IE Mac */ 
/* end of clearfix */

或者這樣設定：.hackbox{display:table; //将對象作為塊元素級的表格顯示}

技巧六：div嵌套時 y軸上 padding和 marign的問題

  1. FF裡 y 軸上 子div 到 父div 的距離為 父padding + 子marign
  2. IE裡 y 軸上 子div 到 父div 的距離為 父padding 和 子marign 裡大的一個
  3. FF裡 y 軸上 父padding=0 且 border=0 時，子div 到 父div 的距離為0，子marign 作用到 父div 外面
前端 浏覽器相容 前段
上一篇: React項目中使用Eslint
下一篇: [轉]2013百度校園招聘-機器學習和資料挖掘工程師-筆試題 - anyuan9

繼續閱讀