如何解析針對(duì)IE6的CSShack用法

今天就跟大家聊聊有關(guān)如何解析針對(duì)IE6的CSS hack用法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、余杭網(wǎng)站維護(hù)、網(wǎng)站推廣。

通過(guò)實(shí)例向大家描述一下IE6的CSS hack用法，我們以一個(gè)LOGO為實(shí)例，講解了針對(duì)IE6，應(yīng)用CSS HACK設(shè)置有別于IE7和FF的效果。

一款針對(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

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

這是一個(gè)LOGO元素，應(yīng)用H3標(biāo)簽進(jìn)行組織，而LOGO圖片則在CSS背景圖片中進(jìn)行定義。
看下面的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;  }

設(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;  }  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;  }

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

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

看完上述內(nèi)容，你們對(duì)如何解析針對(duì)IE6的CSS hack用法有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站標(biāo)題：如何解析針對(duì)IE6的CSShack用法
路徑分享：http://muchs.cn/article42/pgophc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、靜態(tài)網(wǎng)站、小程序開(kāi)發(fā)、建站公司、、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)