CSS hack IE常見相容性問題
阿新 • • 發佈:2018-11-10
1、hack是什麼?
Hack是基於開源的程式的基礎,對其程式碼進行增加、刪除或者修改、優化,使之在功能上符合新的需求。
2、css hack是什麼?
不同的瀏覽器,對css樣式相容不同,css hack就是針對瀏覽器的不同,編寫不同的css樣式。
3.css相容方式
(1)瀏覽器對css中的關鍵字相容
“\9″ IE6+都生效
“\0″ IE8+都生效,是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效,是IE9/10的hack
!important 可以被火狐和ie7所別
* 可以ie7所別
*+ 可以ie7和ie6所別
_ 可以ie6所別
demo
.div{
background:#000; /* 正常寫法普遍支援 */
background:#00F\9; /* 所有IE瀏覽器(ie6+)支援 */
/*但是IE8不能識別“ * ”和“ _ ” */
[background:#000;background:#0F0; /* SF,CH支援 */
background:#00F\0; /* IE8支援*/
*background:#FF0; /* IE7支援 */
_background:#F00; /* IE6支援 */
}
(2)瀏覽器專用的註釋
<!--[if IE 7]>
<!--<link rel="stylesheet" type="text/css"href="ie7.css"/>-->
<![endif]-->
<!--[if IE 6]>
<!--<link rel="stylesheet" type="text/css"href="ie6.css"/>-->
<![endif]-->
<!--[if lte IE 6]>
<!--<link rel="stylesheet" type="text/css" href="ie.css"/>-->
<![endif]-->
(3)對超連結的樣式書寫格式最好遵從L-V-H-A
<style type="text/css">
a:link{};
a:visited{};
a:hover{};
a:active{};
</style>
(4)li裡面的文字過長以省略來顯示
<style type="text/css">
li{
width: 36px;
white-space: nowrap;
text-overflow: ellipsis;
o-text-overflow: ellipsis;
overflow: hidden;
}
</style>
(5)將文字框裡面的文字對齊
<style type="text/css">
input{
vertical-align: middle;
}
</style>
(6)瀏覽器設定固定高度時,是不會像ie6那樣被撐開的,如果像要像ie6那樣被撐開,要將高度設定min-height
<style type="text/css">
div{
height: 200px;
min-height: 200px;
height: auto !important;
}
</style>
(7)FireFox對div與div之間的空格是忽略,而ie6則是會對其進行處理,這樣會造成格式不正確的情況。
(8)不同瀏覽器對透明度的相容
div{
background: red;
opacity: 0.5;//正常標準
-moz-opacity: 0.5;//FireFox相容
filter: alpha(opacity=0.5);//ie相容
}
(9)使用浮動屬性後,ie6的外邊距為實際邊距的2陪,解決辦法為:
display:inline
(10)ie6下的圖片下方會有縫隙,解決方法為:新增display:block;或者是:verticla:top/middle/bottom/text-bottom
(11)css控制圓角,但是ie不支援圓角
div{
border-radius: 5px;
-moz-border-radius: 5px;
-moz-border-radius-bottomleft: 5;
-moz-border-radius-topleft:5 ;
-moz-border-radius-bottomright:5 ;
-moz-border-radius-topleft: 5;
}
(12)FireFox中的滑鼠手勢cursor屬性對hand不支援,但是支援pointer,而ie則是兩個都支援,所以為了相容性都統一使用pointer