常見的瀏覽器相容性問題

阿新 • • 發佈：2018-11-21

1. IE6雙邊距問題:

問題描述：

浮動元素擁有同向margin值（left和margin-left，right和margin-right），在ie6s上第一個元素會出現雙邊距。

解決方案：

解決：ie6 _display:inline;_針對ie6

body{margin:0;}
div{
float:left;
margin-left:10px;
width:100px;
height:100px;background:red;
_display:inline;}
< 
div class="box"></div>
<div class="box"></div>
<div class="box"></div>

2.子元素相對定位父元素溢位隱藏失效

問題描述

子元素定位，它的定位為定位，子元素超出父元素的大小。僅僅給父元素overflow:hidden屬性，在IE瀏覽器上不會隱藏溢位的子元素部分。

解決方案：

除了給父元素加overflow:hidden還要給定位父元素加：position:relative；

.box{width:200px;height:200px;background:red; overflow:hidden; position:relative;}
.box2{width:100px;height:300px;background:green; position:relative;}
<div class="box">
	<div class="box2"></div>
</div>

圖片描述

定位父元素不加定位情況下：

定位父元素定位之後

3. IE轉內聯塊失敗

問題描述：

display:inline-block;在IE6和IE7上面轉換失敗。

解決方案：

*display:inline; *zoom:1;

.box{ display:inline-block;width:200px;height:200px;border:1px solid red;display:inline;*zoom:1}
 <div class="box"></div>
 <div class="box"></div>

圖片描述

4. IE中input輸入文字不垂直居中

問題描述：

在IE中文字輸入不垂直居中

input{border:none;background:none;line-height: 60px}
.bg{ border:1px solid #000;background:url(so_bg.jpg) no-repeat left center;width:200px;height:60px;}
<input type="text" class="bg"/>
<div class="bg">
   <input type="text" style="width:200px;height:60px;"/>
</div>

解決方案：

line-height:高度值.px

圖片描述

5 input背景問題

問題描述：

如上面圖片顯示一樣，背景圖片會遮蓋輸入文字。

解決方案：

給inut在相應的padding值：比如padding-left:30px;
這樣文字就顯示在背景圖片的右邊而不會被文字遮住。

圖片描述

6 li的子元素浮動間隙問題

問題描述：

li的子元素浮動時，IE6和IE7會產生間隙問題。

解決方案：

在<li>上加：vertical-align:middle/top/bottom;

.list{margin:0;padding:0;list-style:none;width:300px;}
.list li{height:30px;line-height:30px;background:red;/*vertical-align:middle;*/}
.list li a{float:left;}//li子元素浮動
.list li span{float:right;}
<ul class="list">
   	<li><span>2017-05-23</span><a>新聞內容</a></li>
	<li><a>新聞內容</a><span>2017-05-23</span></li>
   	<li><a>新聞內容</a><span>2017-05-23</span></li>
   	<li><a>新聞內容</a><span>2017-05-23</span></li>
   	<li><a>新聞內容</a><span>2017-05-23</span></li>
</ul>

圖片描述

7. IE6最小高度

問題描述

IE6元素在高度小於19px時，會以19px顯示。

.box{height:6px;background:red;font-size:0;}
<div class="box"></div>

8 IE6 最小高度

問題描述：

IE6不支援min-height,針對ie6新增height，在ie6可以有同樣效果
min-height ：1 最小高度（可以使元素在內容少時顯示為最小高度指定的值，內容多時撐開自適應）
2 能大於，不能小於，最小這個高度

解決方案

_height:300px;

9 IE下PNG24支援問題

問題描述

在IE6下png24圖片顯示為不透明

解決方案

適情況而定，優先使用jpg 或者 png8,gif
js方法解決（適用於透明背景和透明圖片）
JS解決方案：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<!--[if IE 6]>
   <script src="DD_belatedPNG_0.0.8a-min.js"></script>
   <script>
      DD_belatedPNG.fix('.pngpic,.logo');
   </script>
<![endif]-->
<style type="text/css">
    .bg{width:218px;height:288px;background:url(bg.png) no-repeat;_background:url(bg2.png) no-repeat;}
	.bg{width:218px;height:288px;background:url(bg.png) no-repeat;}
</style>
</head>
<body style="background:red;">
	<img src="bg.png"/>
    <div class="bg"></div>
    <img src="bg.png" class="pngpic"/>
    <div class="bg logo"></div>
    <img src="../../2.png"/>
</body>
</html>

10.浮動註釋在IE6造成諜影

問題描述

執行程式碼，在IE6下會多出一隻“鬼”。

.test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}
<div class="test">
	<div class="box1"></div>
	<!-- 註釋 -->
	<div class="box2">↓你是什麼鬼</div>
</div>

解決方案：

造成此BUG的原因可能是多重混合的，如浮動，註釋，寬高定義等等。並且註釋條數越多，溢位的文字也會隨之增多。

刪除box1和box2之間所有的註釋；
不設定浮動等。

圖片描述

11 hack條件註釋語句

<!--[if IE]>
    只能被 IE 識別;
<![endif]-->

<!--[if IE 6]>
	這是ie6
<![endif]-->

<!--[if IE 7]>
	這是ie7
<![endif]-->

<!--[if IE 8]>
	這是ie8
<![endif]-->

<!--[if gt IE 6]>
    這是大於ie6
<![endif]-->

<!--
    gt（greater than） 大於
    gte（greater than or equal）大於等於
    lt（less than） 	小於
    lte（less than or equal）  小於等於
    ! 	非
-->
<!--
	IE 條件註釋判斷語句是 IE 特有的功能，通過 HTML 註釋中的條件語句能讓不同的 IE 版本識別註釋中的內容
    自IE10起，標準模式不再支援條件註釋
-->

12 CSS-hack屬性級

什麼是CSS hack

由於不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支援、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!

CSS hack的原理

由於不同的瀏覽器和瀏覽器各版本對CSS的支援及解析結果不一樣，以及CSS優先順序對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景來應用不同的CSS。

CSS hack分類

CSS Hack大致有3種表現形式，CSS屬性字首法、選擇器字首法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際專案中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。

屬性字首法(即類內部Hack)：例如 IE6能識別下劃線"“和星號” * “，IE7能識別星號” * “，但不能識別下劃線”"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
選擇器字首法(即選擇器Hack)：例如 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}。
IE條件註釋法(即HTML條件註釋Hack)：針對所有IE(注：IE10+已經不再支援條件註釋)：，針對IE6及以下版本：。這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有程式碼都會生效。

 .box{width:200px;height:200px;background:red;
 *background:blue;background:pink\9;//css  hack
 } .box2{width:100px;height:100px;background:blue;
 _background:green;//css  hack
 }
<!--
   * ie6 7
   _ ie6
   \9 選擇IE6+
-->
<div class="box"></div>
<div class="box2"></div>

圖片說明

13 !important 優先順序

問題描述：

！important優先順序高於行間樣式

.box{width:100px;height:100px;background:red!important;}
<!--
!important提升樣式優先順序
    高於
    行間樣式
-->
<div class="box" style="background:pink;"></div>

圖片描述

背景由於優先順序的問題顯示的並不是pink粉紅色。

常見的瀏覽器相容性問題

目錄

1. IE6雙邊距問題:

問題描述：

解決方案：

2.子元素相對定位父元素溢位隱藏失效

問題描述

解決方案：

圖片描述

3. IE轉內聯塊失敗

問題描述：

解決方案：

圖片描述

4. IE中input輸入文字不垂直居中

問題描述：

解決方案：

圖片描述

5 input背景問題

問題描述：

解決方案：

圖片描述

6 li的子元素浮動間隙問題

問題描述：

解決方案：

圖片描述

7. IE6最小高度

問題描述

8 IE6 最小高度

問題描述：

解決方案

9 IE下PNG24支援問題

問題描述

解決方案

10.浮動註釋在IE6造成諜影

問題描述

解決方案：

圖片描述

11 hack條件註釋語句

12 CSS-hack屬性級

什麼是CSS hack

CSS hack的原理

CSS hack分類

圖片說明

13 !important 優先順序

問題描述：

圖片描述

相關推薦