IE8相容性問題彙總1

1.使用meta标簽調節浏覽器的渲染方式，告訴浏覽器用哪種核心渲染，360雙核浏覽器就是在ie和chrome之間來回切換,幫我們判斷使用webkit還是chrome。

使用meta标簽來強制IE8使用最新的核心渲染頁面，代碼如下：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

一些相容性問題

* 浏覽器相容問題一：塊屬性标簽float後，又有橫行的margin情況下，在IE6顯示margin比設定的大

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

碰到頻率：90%（稍微複雜點的頁面都會碰到，float布局最常見的浏覽器相容問題）

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

備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性标簽，橫向布局的時候我們通常都是用div float實作的，橫向的間距設定如果用margin實作，這就是一個必然會碰到的相容性問題。

浏覽器相容問題三：設定較小高度标簽（一般小于10px），在IE6，IE7，遨遊中高度超出自己設定高度

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

碰到頻率：60%

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

備注：這種情況一般出現在我們設定小圓角背景的标簽裡。出現這個問題的原因是IE8之前的浏覽器都會給标簽一個最小預設的行高的高度。即使你的标簽是空的，這個标簽的高度還是會達到預設的行高。

浏覽器相容問題四：行内屬性标簽，設定display:block後采用float布局，又有橫行的margin的情況，IE6間距bug

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

碰到幾率：20%

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

備注：行内屬性标簽，為了設定寬高，我們需要設定display:block;(除了input标簽比較特殊)。在用float布局并有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行内屬性标簽，是以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

浏覽器相容問題五：圖檔預設有間距

問題症狀：幾個img标簽放在一起的時候，有些浏覽器會有預設的間距，加了問題一中提到的通配符也不起作用。

碰到幾率：20%

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

備注：因為img标簽是行内屬性标簽，是以隻要不超出容器寬度，img标簽都會排在一行裡，但是部分浏覽器的img标簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起浏覽器相容問題的用法，是以我禁止他們使用）

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

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

碰到幾率：5%

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

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

浏覽器相容問題七：透明度的相容CSS設定：

css設定透明度，首先需要知道的是在浏覽器中的不同使用，一般在ie中用的是filter:alpha(opacity=0);這個屬性來設定div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于相容的，一般的做法就是在書寫css樣式的将2個都寫上就行，就能實作相容，具體看代碼：

方法一：

<html>
    <head>
        #div1{
            width:200px;
            height:600px;
            margin:0 auto;     
            opacity:0;
          filter:alpha(opacity=0);             //0 代表的是隐藏，就是透明度最低。
        }

    </head>
    <body>
        <div id='div1'>
            <p>測試文字。</p>
        </div>
    </body>
</html>

方法二：

CSS - firefox與IE透明度(opacity)設定差別

IE：

filter:alpha(opacity=sqlN)

其中 sqlN的值域為[0, 100]

Firefox,Chrome和Safari：

opacity:sqlN

其中sqlN的值域為[0, 1]

方法三：

.ieCss {   
     display:-moz-inline-box;   
     display:inline-block;   
     width:;   
     height:;   
     background-color:red;   
     filter:alpha(opacity=);   
}   
.fireFox35Css {   
     display:-moz-inline-box;   
     display:inline-block;   
     width:;   
     height:;   
     background-color:blue;   
     opacity:;   
}