實例解析一款針對IE6的CSS hack用法
本文通過實例向大家描述一下IE6的CSS hack用法，我們以一個LOGO為實例，講解了針對IE6，應用CSS HACK設置有別于IE7和FF的效果。具體內容請看本文詳細介紹，相信本文介紹一定會讓你有所收獲。
一款針對IE6的CSS hack用法實例
CSS網頁布局的兼容性問題一直困擾著大家，其實在51cto.com以前的文章中也有著豐富的CSS HACK與CSS兼容性的文章，只是有些文章可能講的比較抽象而沒有實例化，不便于大家的理解。
現在要講解的是一個關于IE6的CSS HACK的用法。我們以一個LOGO為實例，講解了針對IE6，應用CSS HACK設置有別于IE7和FF的效果。我們看下面的HTML代碼：
ExampleSourceCode
- <h3>
- <ahrefahref="http://www.sunluscious.com.cn/">
- 我愛CSSCSSWebDesign-Web標準化Div+css教程</a>
- </h3>
這是一個LOGO元素，應用H3標簽進行組織，而LOGO圖片則在CSS背景圖片中進行定義。
看下面的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;
- }
設置BODY與H3的樣式。將LOGO圖片置于H3標簽下面的鏈接元素中。我們打開查看到的效果如下：
我們再打開IE6查看，得到如下的效果：
虛線不是那么美觀了，顯得非常粗糙，這時候我們該怎么辦呢？我們可以針對IE6瀏覽器進行CSS HACK設置，定義在IE6下顯示為不同的外觀。
我們對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;
- }
- *htmlh3{
- border:1pxsolid#03c;
- }
請注意最下面CSS代碼的寫法。應用了選擇器“*htmlh3”。而“*html”就是針對IE6及以下瀏覽器的CSS HACK選擇器了。我們再次打開IE6查看，得到如下的效果：
在IE7與FF中，虛線很漂亮，而在IE6下面，直接以實線顯示。
我們可以舉一反三，試著定義不同的外邊距或背景圖片等屬性，進行查看。在實際開發(fā)中，對這些CSS HACK應該是非常靈活的，大家要多思考，有經驗心得，歡迎來52CSS.com與大家分享。
【編輯推薦】
- 兼容IE6,IE7,IE8,Firefox的CSS HACK寫法
- CSS Hack技術解決多瀏覽器兼容問題
- 深入探究DIV CSS布局中position屬性用法
- JS在IE和Firefox兼容性問題及解決方案
- IE8瀏覽器中正式版CSS hack技術用法
