出于某种原因,IE-8不会显示我的内联菜单。 (见附图) 我的代码是:
#navigation #main-menu {
display: inline-block;
float: none;
margin: 0 auto;
padding: 0;
position: relative;
text-align: center;
line-height: 18px;
font-size: 12px;
list-style: none;
}
我找到了以下帖子IE8 display inline-block not working。尝试添加Doctype,并添加此代码:
<!-- [if lt IE 8]>
<style type="text/css">
#navigation #main-menu {
display: inline;
}
</style>
<![endif]-->
仍然无效,有什么建议吗?你可以在这里看到有问题的图片:http://preciseos.com/PreciseOs/Untitled.jpg
这是html代码:
<ul style="margin-top:20px;margin-right: 10%;" class="nav-collapse collapse" id="main-menu">
<li class="active"><a href="#page-welcome">Home</a></li>
<li class=""><a href="#page-about">About</a></li>
<li><a href="#page-features">Services</a></li>
<li><a href="#page-work">Work</a></li>
<li><a href="#page-contact">Contact</a></li>
您还可以在www.preciseos.com上查看该问题。
谢谢, 盎司
答案 0 :(得分:1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
为什么不添加这个?这是你的来源的答案。试一试
除非你使用float ,否则IE8会将它视为块级元素注意:
我发布了doctype作为评论,但它已损坏,因此将其发布为答案
<强>更新强>
<强> HTML 强>
<ul id="main-menu">
<li class="actives"><a href="#page-welcome">Home</a>
</li>
<li class="actives"><a href="#page-about">About</a>
</li>
<li class="actives"><a href="#page-features">Services</a>
</li>
<li class="actives"><a href="#page-work">Work</a>
</li>
<li class="actives"><a href="#page-contact">Contact</a>
</li>
</ul>
<强> CSS 强>
.actives {
display: inline;
padding:10px;
float: left;
}
a {
text-decoration:none;
}
的 Demo 强> 的
答案 1 :(得分:1)
它打破布局的原因是IE8
不支持HTML5元素,例如nav
。
相反,您可以使用<div>
代码或尝试使用javascript解决方法 HTML5shiv 来支持IE
答案 2 :(得分:0)
首先,确保使用选择器
定位li
元素
#navigation #main-menu li
同时尝试使用float
代替display: inline;
#navigation #main-menu li {
display: block;
float: left;
margin-right: 10px;
}
答案 3 :(得分:0)
正如Surjith SM所说,IE8不支持nav5等HTML5元素。 通过添加以下代码解决了该问题:
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
html5shi(m | v)为所有html5元素创建doc元素,因此CSS中的样式可以启动.IE的默认行为是忽略未知元素。有关详细信息,请参阅header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?