Question

我有这个HTML：

<!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：

* { 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; }

在Firefox和Chrome中100％正确无误。在Internet Explorer 6.0中，我收到错误：当“Basket”选项卡的高度低于其他四个选项卡时（在此代码中存在<IMG>标记）

如何解决这种情况？

Answer 1

如果您确实想要纠正此问题，可以执行以下操作：

确保图像源是正确的，如果图像源是正确的，那么您可以在css文件中而不是在html中声明图像。

做类似的事情：

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

但是像Shamim所说的那样，IE 6是一个死的浏览器，所以最终你最好的选择就是支持IE 8或更高版本。

如何使用图像为li文本和li文本执行有效的CSS？

1 个答案: