本文通過(guò)實(shí)例向大家描述一下IE6的CSS hack用法，我們以一個(gè)LOGO為實(shí)例，講解了針對(duì)IE6，應(yīng)用CSS HACK設(shè)置有別于IE7和FF的效果。具體內(nèi)容請(qǐng)看本文詳細(xì)介紹，相信本文介紹一定會(huì)讓你有所收獲。

一款針對(duì)IE6的CSS hack用法實(shí)例

CSS網(wǎng)頁(yè)布局的兼容性問(wèn)題一直困擾著大家，其實(shí)在51cto.com以前的文章中也有著豐富的CSS HACK與CSS兼容性的文章，只是有些文章可能講的比較抽象而沒(méi)有實(shí)例化，不便于大家的理解。

現(xiàn)在要講解的是一個(gè)關(guān)于IE6的CSS HACK的用法。我們以一個(gè)LOGO為實(shí)例，講解了針對(duì)IE6，應(yīng)用CSS HACK設(shè)置有別于IE7和FF的效果。我們看下面的HTML代碼：

ExampleSourceCode

<h3> 
<ahrefahref="http://www.scjtxx.cn/"> 
我愛(ài)CSSCSSWebDesign-Web標(biāo)準(zhǔn)化Div+css教程</a> 
</h3> 
 

　　這是一個(gè)LOGO元素，應(yīng)用H3標(biāo)簽進(jìn)行組織，而LOGO圖片則在CSS背景圖片中進(jìn)行定義?！　?br /> 看下面的CSS代碼：

ExampleSourceCode 

body{  
margin:0;  
padding:0;  
}  
h3{  
margin:50pxauto;  
width:450px;  
height:60px;  
padding:5px;  
border:1pxdotted#03c;  
}  
h3a{  
display:block;  
width:450px;height:60px;  
text-indent:480px;  
white-space:nowrap;  
background:url(logo.jpg)no-repeat00;  
overflow:hidden;  
}  

　　設(shè)置BODY與H3的樣式。將LOGO圖片置于H3標(biāo)簽下面的鏈接元素中。我們打開(kāi)查看到的效果如下：

　　我們?cè)俅蜷_(kāi)IE6查看，得到如下的效果：

  　虛線不是那么美觀了，顯得非常粗糙，這時(shí)候我們?cè)撛趺崔k呢？我們可以針對(duì)IE6瀏覽器進(jìn)行CSS HACK設(shè)置，定義在IE6下顯示為不同的外觀。
　　
我們對(duì)CSS代碼進(jìn)行調(diào)整：

ExampleSourceCode

body{  
margin:0;  
padding:0;  
}  
h3{  
margin:50pxauto;  
width:450px;  
height:60px;  
padding:5px;  
border:1pxdotted#03c;  
}  
h3a{  
display:block;  
width:450px;height:60px;  
text-indent:480px;  
white-space:nowrap;  
background:url(logo.jpg)no-repeat00;  
overflow:hidden;  
}  
*htmlh3{  
border:1pxsolid#03c;  
}  

　　請(qǐng)注意最下面CSS代碼的寫(xiě)法。應(yīng)用了選擇器“*htmlh3”。而“*html”就是針對(duì)IE6及以下瀏覽器的CSS HACK選擇器了。我們?cè)俅未蜷_(kāi)IE6查看，得到如下的效果：

　　在IE7與FF中，虛線很漂亮，而在IE6下面，直接以實(shí)線顯示。
　　
　　我們可以舉一反三，試著定義不同的外邊距或背景圖片等屬性，進(jìn)行查看。在實(shí)際開(kāi)發(fā)中，對(duì)這些CSS HACK應(yīng)該是非常靈活的，大家要多思考，有經(jīng)驗(yàn)心得，歡迎來(lái)52CSS.com與大家分享。
 

【編輯推薦】

1. 兼容IE6,IE7,IE8,Firefox的CSS HACK寫(xiě)法
2. CSS Hack技術(shù)解決多瀏覽器兼容問(wèn)題
3. 深入探究DIV CSS布局中position屬性用法
4. JS在IE和Firefox兼容性問(wèn)題及解決方案
5. IE8瀏覽器中正式版CSS hack技術(shù)用法