以前寫(xiě)過(guò)一篇關(guān)于CSS hack的文章,但近期回頭看了看發(fā)現理解的不夠深刻,總結的也不凝練,于是今天重新測試從新寫(xiě)一篇。常用的CSS
hack如下(筆者只對IE&FF&Chrome進(jìn)行了測試)。
hack列表(全部經(jīng)筆者測試,且均為標準模式下,混雜模式由于很少會(huì )用到所以未對其進(jìn)行測試):

其中粉紅色部分為屬性hack,黃色部分為選擇器hack,它們可以結合使用。此外Firefox和Chrome也有它們專(zhuān)有的hack,詳細hack方式及使
用示例如下:
Firefox:
@-moz-document url-prefix() /*寫(xiě)在選擇器外層時(shí)(只可寫(xiě)在此處):Firefox only*/
Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) /*寫(xiě)在選擇器外層時(shí)(只可寫(xiě)在此處):Chrome only*/
使用示例-寫(xiě)在選擇器前面:
@-moz-document url-prefix() /*Firefox*/
{
body
{
background-color:pink;
}
}
注意事項:
瀏覽器對css的解析是從前到后的,并且采用最后一個(gè)樣式聲明。
原作者:微米博客
還是不知道怎么區分.好吧,來(lái)看個(gè)例子:
<!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 - http://www.52css.com%3c/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; /*所有瀏覽器都會(huì )顯示為紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8會(huì )顯示紅色*/
*background-color: #0066FF; /*IE6、IE7會(huì )變?yōu)樗{色*/
_background-color: #009933; /*IE6會(huì )變?yōu)榫G色*/
}
-->
</style>
</head>
<body>
<div id="test" class="color">測試方塊 www.mycsu.net </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>
---------------------------------------------------------------------------------------------------
background: red; /* 對FF Opera和Safari有效 */
#background: blue; /* 對 IE6 和 IE7有效 */
_background: green; /* 只對IE6有效 */
/*/background: orange;*/ /** 只對IE8有效 **/
!important /*FF、IE7有效*/
* /*IE都有效*/
============================================================
IE8是可以和IE7兼容的,簡(jiǎn)單一行代碼,讓IE8自動(dòng)調用IE7的渲染模式
只需要在頁(yè)面中加入如下HTTP meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
只要IE8讀到這個(gè)標簽,它就會(huì )自動(dòng)啟動(dòng)IE7兼容模式,保證頁(yè)面完整展示。
聯(lián)系客服