1. 程式人生 > >CSS hack IE常見相容性問題

CSS hack IE常見相容性問題

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