问题描述
|
我的网站的导航可以在IE6以外的其他浏览器上正确呈现。
问题
而不是这样显示列表:关于|服务,每个出现在新行中,例如:
Home
About
Services
Community Pages
<li>
中的<a>
标记将填满整个页面的宽度。
我之所以没有给ѭ2固定宽度,是因为:导航项的长度不同,并且要占用相对于其长度的空间。
我的HTML
<div id=\"nav\">
<ul>
<li class=\"top1space2\"><a href=\"index.php\" title=\"Go To Our Home Page\" class=\"top1space3\">Home</a></li>
<li class=\"top1space2\"><a href=\"#\" title=\"More Jobs on Ngcareers\">More Jobs</a>
<ul>
<?php $count=count($c_id);for ($i=0;$i<$count;$i++){ ?>
<li><b><a href=\"category/<?php echo $c_slug[$i];?>\" >» <?php echo $c_name[$i];?></a></b></li>
<?php } ?>
<li class=\"clearfloat\"> </li>
</ul>
</li>
<li class=\"top1space2\"><a href=\"graduatejobs.php\">Graduate Jobs</a></li>
<li class=\"top1space2\"><a href=\"vacancy.php\">Post A Job</a></li>
<li class=\"top1space2\"><a href=\"month.php\" >Jobs This Month</a></li>
<li class=\"top1space2\"><a href=\"jobalert.php\" >GSM Job Alert</a></li>
<li class=\"top1space2\"><a href=\"employers.php\" >Employers</a></li>
<li class=\"top1space2\"><a href=\"submitcv.php\"> Submit CV</a></li>
<li class=\"top1space2\"><a href=\"subscribe.php\" >Subscribe</a></li>
<li class=\"top1space2\"><a href=\"advertise.php\">Advertise</a></li>
<li class=\"top1space2\"><a href=\"/about/contact-us\">Contact</a></li>
</ul>
</div>
我的CSS:
#nav ul {
padding: 0px;
width: 1020px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
list-style-type: none;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
height: 32px;
}
#nav ul li {
float: left;
display: block;
}
.top1space2 {
background-color: #086DA1;
background-image: url(../pics/slice1.jpg);
background-repeat: repeat-x;
display: block;
height: 36px;
}
.top1space3 {
color: #000;
font-weight: bold;
background-color: #F93;
background-image: url(../pics/slice2.jpg);
background-repeat: repeat-x;
}
#top1space3 {
color: #FFF;
font-weight: bold;
background-color: #111;
background-image: url(../pics/btnbg.jpg);
background-repeat: repeat-x;
}
#nav ul .top1space2 a {
color: #FFC;
text-decoration: none;
font-weight: bold;
font-size: 12px;
display: block;
height: 36px;
line-height: 36px;
text-align: center;
padding-right: 10px;
padding-left: 10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #9CF;
}
#nav ul .top1space2 a:hover {
color: #000;
text-decoration: none;
cursor: pointer;
background-color: #F93;
background-image: url(../pics/slice2.jpg);
background-repeat: repeat-x;
}
#nav ul .top1space2:hover {
cursor: pointer;
}
请在不给元素固定宽度的情况下如何在IE6中解决此问题?
解决方法
绝对是IE错误。 IE6(我也相信也是IE7)以
width:auto
作为width:100%
渲染浮动元素。
您可以对IE6 / 7使用此规则来修复布局。
#nav ul li {
float: left;
display: block;
width:0;
white-space:nowrap;
}
并使用条件注释仅适用于IE6 / 7,或更简单地使用IE6 / 7无法理解的选择器覆盖width:auto
,例如:
#nav ul li {
float: left;
display: block;
width:0;
white-space:nowrap;
}
#nav ul > li {
width:auto;
}
, 使li元素内联(删除任何元素中的所有浮点),并从链接中删除display:块。我创建了一个jsfiddle来展示它是如何工作的。要记住的一件事:通过删除所有浮点并仅内联显示所有内容,您将在列表中的链接元素之间留出空隙。有一种摆脱这种情况的方法(我在jsfiddle中显示),但是它需要删除li元素之间的所有空间,包括换行符。它使您的标记稍微有些混乱,但是我想这取决于您对它的关心程度以及对继续支持IE6的关心程度。
http://jsfiddle.net/WEmv9/4/
我还清理了很多css声明-那里有很多重复的规则和不必要的标记-显然,这是您的选择,但是它使样式更加清晰易懂。
编辑更新的jsfiddle以使\'home \'链接正确的颜色