常見瀏覽器相容問題、盒模型2種模式以及css hack知識講解

阿新 • • 發佈：2019-01-11

什麼是瀏覽器相容問題？所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段程式碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的網站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。

總結一下我編寫程式碼的時候遇到的瀏覽器相容問題，跟大家學習。

一、解決無法在IE6下面設定1px高的容器(div)的問題。

　　大家看看這一段程式碼：

　　當然，這段程式碼在非IE6下是能夠設定1px高度的div的（如左圖），但是在IE6中的效果如右圖：

　　非IE6下： IE6下：

　　解決方案：在div裡面新增一個空格符( )以建立內容；再設定line-height:1px;即可。

二、透明度opacity不相容的問題，opacity是屬於css2.1的內容，在IE6中並不支援（另外position:fixed;也是css2.1的內容，並不支援IE6）。

　　建立一個寬高100px的div，設定透明度為0.5，背景色黑色如下：

　　<style>　　

　　　　div{

　　　　height: 100px;

　　　　width: 100px;

　　　　opacity:.5;

　　　　background: #000;

　　　　}

　　</style>

　　效果圖分別如下：左邊為非IE6，右邊是IE6

　　非IE6：　　IE6：

　　會看到在IE6中並不支援該屬性，解決方案：

　　<style>　　

　　　　div{

　　　　height: 100px;

　　　　width: 100px;

　　　　opacity:.5;

　　　　filter:alpha(opacity=50); //解決IE6問題

　　　　background: #000;

　　　　}

　　</style>

三、IE6下的橫向雙倍margin bug。設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。

　　首先要觸發這樣的bug，就要達到以下條件：

　　1.元素必須浮動（float）;

　　2.元素必須具有橫向margin，margin-left、margin-right

　　3.元素必須塊元素

　　4.瀏覽器必須是IE6。

　　以上條件缺一不可，所以只要不是IE6，就不存在這個問題。解決思路很簡單，破壞其中一個條件即可。

　　例如：

<head>
    <meta charset="UTF-8">
    <title>測試瀏覽器相容問題</title>
    <style>
        body{
            background: #fff;
        }
        .wrap{
            width: 300px;
            height: 150px;
            margin:50px auto;
            border: 2px solid #333;
            overflow: hidden;
        }
        .wrap div{
            height: 100px;
            width: 100px;
            background: #333;
            float: left; 
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
        <div></div>
    </div>
</body>

　　效果圖分別如下：左邊為非IE6，右邊是IE6

　　可以看到IE6下左邊是margin-left值是40px，解決方案：設定display:inline;將其轉換成行屬性。

四、IE6下如果給圖片套上a標籤會預設有border。

　　img{

　　　　width: 100px;

　　　　height: 100px;

　　　　}

　　效果圖分別如下：左邊為非IE6，右邊是IE6

　　這個問題相對比較容易解決，只要設定圖片的border:none;就可以了。需要注意的是不是設定a標籤的border值，而是設定圖片的。

五、IE6下不支援png格式圖片的透明效果。

　　解決方案：使用使用外掛：DD_belatedPNG.js 外掛（如需要該外掛，可以自行百度:)）

　　說明一下使用方法：貼上以下程式碼即可

<!--[if IE 6]>
    <script src="js/DD_belatedPNG_0.0.8a.js"></script>
    <script>
    DD_belatedPNG.fix('*');
    </script>    
<![endif]-->

六、提一下擁有佈局haslayout。說道瀏覽器的相容問題就不得不提haslayout。

　　在IE6、7中，有時候並沒有觸發擁有佈局。haslayout是什麼？用我的理解就是如果元素（標籤）擁有了佈局，那麼它就會獲得它本身預設的樣式，一切佈局就會按照這個預設標準佈局，也就是這個佈局是正常的。然而，如果元素沒有了預設的佈局，佈局是不是會亂呢？（因為我們給的樣式是在元素擁有佈局[預設樣式]之上的）。所以這種情況下，我們就必須觸發這個擁有佈局，觸發haslayout。

　　觸發haslayout有很多種方法：

　　1、最常用也最為安全的方法：給沒有haslayout的元素設定zoom:1;（其實是不是1不重要，只要除 none 外任意值）。之所以說它最安全，因為其他瀏覽器根本不認識它。

　　2、設定height：任何值除了auto。

　　3、設定浮動。

　　4、設定width：任何值除了auto。

七、介紹一下盒模型的2種模式。

　　對於盒模型，大家應該也很熟悉，這裡只是介紹一下2個模式：標準模式和怪異模式

　　標準模式：通常在非IE低瀏覽器中。計算方法：佔的空間的寬度=內容的寬度＋左右內邊距的寬度＋左右邊框的寬度＋左右外邊距的寬度（margin + padding+ border+ content）

　　怪異模式：怪異模式是指在IE6及更早的IE版本下盒模型的計算方法：所佔空間總寬度=內容＋外邊距（ content＋margin）

　　他們之間的相同點和不同點其實也很容易看得出來：

　　相同點：都是由margin ,border,padding,content組成

　　不同點：：計算寬/高度方法的不同，標準模式下盒子的總寬度是由margin,padding,border,content的相加得來；怪異模式下：總寬度是由content減去padding、border得來的。

八、瀏覽器的相容還有其他的問題，時間有限就沒有一一解釋，下面提一提：

　　①：在各個瀏覽器下img有空隙(原因是：回車)

　　②：Ie6下，不識別最大寬、高度和最小寬高度，意即min-width/height和 Max-width/height在ie6中沒效果，

　　③：3畫素問題：ie6下，當浮動元素與流動元素並列顯示時，他們之間會存在三畫素問題。（解決方法用hack）

　　④：當定義行內元素為包含框時，且包含框包含的絕對定位元素以百分比為單位進行定位時，會出現混亂（zoom:1）

　　⑤：當多個浮動元素中間夾雜著HTML註釋語句時，如果浮動元素寬度為100%，則在下一行多顯示一個上一行最後一個字元。

　　⑥：兩個塊元素，豎向的margin值不增加，會重疊，其間距為最大margin值。

　　⑦：優先順序：被!important 註明的css屬性具有最高優先順序(.abc{color:red !important;})。但在ie6中!important具有一個bug:在同一組css屬性中，!important不起作用。

　　⑧：火狐不識別background-position-y 或background-position-x;

　　⑨：ie6 不支援 fixed（前面有提到）

　　⑩：解決 ie6 最大、最小寬高 hack方法（這個說明一下）

/* 最小寬度 */
.min_width{
    min-width:300px;
    _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}

/* 最大寬度 */
.max_width{
   max-width:600px;
   _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}

/* 最小高度 */
.min_height{
   min-height:200px;
   _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}

/* 最大高度 */
.max_height{
   max-height:400px;
   _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}

　　 ①①：z-index不起作用的 bug

九、css hack：前端開發人員根據不同的瀏覽器以及不同的版本而分別編寫的特定的CSS樣式，通俗理解就是專門為不同瀏覽器設定自己的樣式。

　　各版本IE的hark，程式碼表示：

　　.bb{

　　　　height:32px;

　　　　background-color:#f1ee18; /*所有識別*/

　　　　.background-color:#00deff\9; /*IE6、7、8識別*/

　　　　+background-color:#f1ee18; /*IE6、7識別*/

　　　　_background-color:#f1ee18; /*IE6識別*/

　　　　}

　　< div class ="bb"></ div >

　　像剛剛png圖片不支援插入的程式碼一樣，這種hack用在專門瀏覽器下，用法如下：下面還有很多類。

　　　　<!--[if IE 6]>
 　　　　   <script src="js/DD_belatedPNG_0.0.8a.js"></script>
   　　　　 <script>
   　　　　 DD_belatedPNG.fix('*');
   　　　　 </script>    
　　　　<![endif]-->

符號	含義	示例
！	非運算子	<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]--> <!--[if !(IE 6)]>除IE6外可以識別<![endif]-->
lt	Less than小於	<!--[ if lt IE 8]>IE8以下版本<![endif]-->
gt	greater than大於	<!--[ if gt IE 8]>IE8以上版本<![endif]-->
lte	less than或equal小於等於	<!--[ if lte IE 8]>IE8及IE8以下版本<![endif]-->
gte	greater than或equal大於等於	<!--[ if gte IE 8]>IE8及IE8以上版本<![endif]-->
\|	或運算子	<!--[ if IE 8 \|IE 7]>IE7或IE8版本<![endif]-->
&	與運算子	<!--[ if gt IE 6&!IE 8]>除IE8外IE6以上版本<![endif]-->

/*類內部hack：*/
    .header {_width:100px;}            /* IE6專用*/
    .header {*+width:100px;}        /* IE7專用*/
    .header {*width:100px;}            /* IE6、IE7共用*/
    .header {width:100px\0;}        /* IE8、IE9共用*/
    .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/
    .header {width:330px\9\0;}    /* IE9專用*/

/*選擇器Hack：*/
    *html .header{}        /*IE6*/ 
    *+html .header{}    /*IE7*/

常見瀏覽器相容問題、盒模型2種模式以及css hack知識講解

常見瀏覽器相容問題、盒模型2種模式以及css hack知識講解

12種Javascript方法解決常見瀏覽器相容問題

css基礎及其例項：常用選擇器、顏色五中寫法、字型樣式、自定義字型、盒模型及其樣式設定

3、盒模型新增樣式

css---標準流、盒模型、浮動

瀏覽器相容、CSS3 選擇器

學習總結：CSS(一)塊級與行級元素特性、盒模型、層模型、BUG與BFC、浮動模型

常見瀏覽器相容問題整理（ie9及以上）

關於ie6常見瀏覽器相容問題

微信跳轉瀏覽器提示_微信跳轉外部瀏覽器跳轉提示的2種實現方式

[svc]ftp協議數據連接的2種模式

【相機】(1)——Intent調相機的2種方式以及那些你知道的和不知道的坑

Linux中vim的三種模式以及基本命令

Linux網卡配置的四種模式以及防火墻設置的四種方式（CentOS 7.4）未完成

【Ruby on Rails實戰】3.2 配置資料庫以及資料庫操作知識

jsp自動重新整理的幾種方法以及 meta屬性簡略講解

CSS3.0盒模型display:flex;的使用[相容微信瀏覽器]

瀏覽器的標準相容模式和怪異呈現模式以及盒模型

盒模型中padding、border、margin的區別

從零開始學習前端開發 — 3、CSS盒模型

常見瀏覽器相容問題、盒模型2種模式以及css hack知識講解

相關推薦