如何對li文本和li文本使用圖像進行有效的CSS處理？

我有這樣的HTML：如何對li文本和li文本使用圖像進行有效的CSS處理？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head profile="http://gmpg.org/xfn/11"> 
<link rel="stylesheet" href="style2.css" type="text/css" media="screen, projection" /> 
</head> 
<body class="custom"> 
<div id="container"> 
<div id="page"> 
<ul class="menu"> 
<li class="tab current"><a href="ind1.html">Home</a></li> 
<li class="tab"><a href="ind2.html">About</a></li> 
<li class="tab"><a href="ind3.html">Contact</a></li> 
<li class="tab"><a href="ind4.html">Privacy</a></li> 
<li class="tab"><a href="ind5.html"><img src="basket.gif" width="17" height="13" /> Basket</a></li> 
</ul> 
</div> 
</div> 
</body> 
</html>

這個CSS：在Firefox和Chrome

* { padding: 0; margin: 0; } 
body { font-size: 62.5%; color: #111111; background: #FFFFFF; font-family: Georgia, "Times New Roman", Times, serif; } 
#container { width: 92.1em; margin: 0 auto; } 
#page { background: #FFFFFF; padding: 2.2em; } 
.menu ul, .menu ul li { width: 15em; line-height:100%;} 
.menu ul ul, .menu :hover ul :hover ul { left: 14.9em; } 
.menu { border-width: 0; } 
.menu, .menu a { border-color: #DDDDDD; } 
.menu { position: relative; list-style: none; z-index: 50; } 
.menu li { position: relative; float: left; } 
.menu ul { position: absolute; visibility: hidden; list-style: none; z-index: 110; } 
.menu ul li { clear: both; } 
.menu a { display: block; } 
.menu li { margin-bottom: -0.1em; } 
.menu a { font-size: 1.1em; line-height: 2.273em; padding: 0.636em 0.818em; border-width: 0.091em; border-left-width: 0; } 
.menu .current a { border-bottom-color: #FFFFFF; } 
.menu ul .current a, .menu .current ul a { border-bottom-color: #DDDDDD; } 
.menu a, .menu .current ul a { color: #111111; background: #EFEFEF; } 
.menu a:hover, .menu .current ul a:hover { color: #111111; background: #DDDDDD; } 
.menu .current a, .menu .current a:hover { color: #111111; background: #FFFFFF; } 
.menu .current > a { cursor: text; } 
.menu a{ color: #111111; background: #EFEFEF; } 
.menu a:hover{ color: #111111; background: #DDDDDD; } 
.menu, .menu a, .menu li ul { border-style: solid; } 
.menu a { text-transform: uppercase; letter-spacing: 2px; } 
.menu a:hover { height: auto; } 
#content { overflow: hidden; }

廠100％正確。在Internet Explorer 6.0中，我收到錯誤信息：當選項卡「購物籃」的高度較低時，其他四個選項卡（在此代碼中存在<IMG>標籤）

如何解決這種情況？

來源

2012-01-04 vp1

IE 6.0是一個死的瀏覽器（正式），所以沒有必要爲它提供任何支持。 – 2012-01-04 13:21:31

@ShamimHafiz - 至少在美國。瞭解你的用戶 - 即使在微軟的倒計時頁面，中國仍然在25％。 http://www.ie6countdown.com/ – derekerdmann 2012-01-04 14:42:01

如果你確實想糾正這個雖然你可以做到以下幾點：

確保圖像源是正確的，如果它是正確的，那麼你可以在CSS文件中，而不是在你的HTML聲明圖像。

做這樣的事情：

#basket 
{ 
    width: 17px; 
    height: 13px; 
    background-image: url(basket.gif); 
    background-repeat: no-repeat; 
}

但像沙米姆說，IE 6是一條走不通的瀏覽器，所以最終你最好的選擇可能僅僅配套IE 8或以上。

來源

2012-01-04 13:31:07

如何對li文本和li文本使用圖像進行有效的CSS處理？

回答

相關問題