IE8正式版出來有一段日子了,但是針對ie8正式版的CSS hack卻很少,其實這是值得慶幸的,因為ie8修複了很多IE6和IE7的一些BUG,更加接近W3C標準。
針對IE8正式版的CSS hack目前可以找到的分為2種:
第一種:”\9″:
基本的寫法:
1.
.test { color
/*\**/
:
blue
\
9
}
這個IE6、IE7、IE8都能識別;但是IE8不能識別“*”和“_”的css hack;所以我們可以這樣寫hack:(轉載
1.
.header {
width
:
300px
;}
/* 所有瀏覽器*/
2.
.header {width
/*\**/
:
330px
\
9
;}
/* 所有瀏覽器IE瀏覽器 */
3.
.header {*
width
:
310px
;}
/* IE7和IE6能識別,IE8和FF不能識別*/
4.
.header {
_width
:
290px
;}
/* IE6能識別,IE7、IE8和FF不能識別*/
第二種:就是使用IE的條件注釋
具體可以查看這裡:http://www.css88.com/archives/705;
其他一些css hack的測試:
1.
.color
1
{
color
:
#F00
; color
/*\**/
:
#00F
/*\**/
}
/*IE6,IE7,IE8,FF,OP,SA識別*/
2.
.color
2
{
color
:
#F00
; color
/*\**/
:
#00F
/*\9**/
}
/*IE7,IE8,FF,OP,SA識別*/
3.
.color
3
{
color
:
#F00
; color
/*\**/
:
#00F
\
9
}
/*IE6,IE7,IE8識別*/
4.
.color
4
{
color
:
#F00
; color
/*\**/
:
#00F
\
9
}
/*IE7,IE8識別*/
/*“color”和“/*\**/
”之間有個空格*/
其中:OP表示Opera,SA表示Safari
參考閱讀:
http://ladysign-apps.com/blog/archives/529
http://webdevelop.nitamihai.com/ie8-css-hack/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>區別IE6、IE7、IE8、FireFox的CSS hack - www.newcss.cn</title>
<style type="text/css">
<!--
#test,#note{
margin:0 auto;
text-align:center;
}
#test {
width:200px;
height:30px;
border: 1px solid #000000;
color:#fff;
line-height:30px;
}
.color{
background-color: #CC00FF; /*所有瀏覽器都會顯示為紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8會顯示紅色*/
*background-color: #0066FF; /*IE6、IE7會變為藍色*/
_background-color: #009933; /*IE6會變為綠色*/
}
-->
</style>
</head>
<body>
<div id="test" class="color">測試方塊 hi.baidu.com/dpxdqx </div>
<div id="note">
<strong style="color:#009933">IE6</strong>
<strong style="color:#0066FF">IE7</strong>
<strong style="color:#FF0000">IE8</strong>
<strong style="color:#CC00FF">FireFox</strong>
</div>
</body>
</html>