常見的瀏覽器相容性問題
目錄
- 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屬性級
- 13 !important 優先順序
- 問題描述:
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粉紅色。