如何解析針對IE6的CSS hack用法

今天就跟大家聊聊有關如何解析針對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

<h4> <ahrefahref="http://www.51cto.com/"> 我愛CSSCSSWebDesign-Web標準化Div+css教程</a> </h4>

這是一個LOGO元素，應用H3標簽進行組織，而LOGO圖片則在CSS背景圖片中進行定義。
看下面的CSS代碼：

ExampleSourceCode

body{  margin:0;  padding:0;  }  h4{  margin:50pxauto;  width:450px;  height:60px;  padding:5px;  border:1pxdotted#03c;  }  h4a{  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;  }  h4{  margin:50pxauto;  width:450px;  height:60px;  padding:5px;  border:1pxdotted#03c;  }  h4a{  display:block;  width:450px;height:60px;  text-indent:480px;  white-space:nowrap;  background:url(logo.jpg)no-repeat00;  overflow:hidden;  }  *htmlh4{  border:1pxsolid#03c;  }

請注意最下面CSS代碼的寫法。應用了選擇器“*htmlh4”。而“*html”就是針對IE6及以下瀏覽器的CSS HACK選擇器了。我們再次打開IE6查看，得到如下的效果：

在IE7與FF中，虛線很漂亮，而在IE6下面，直接以實線顯示。
我們可以舉一反三，試著定義不同的外邊距或背景圖片等屬性，進行查看。

看完上述內容，你們對如何解析針對IE6的CSS hack用法有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。