IE8 显示内联块问题答案

【问题标题】：IE8 display inline-block issueIE8 显示内联块问题
【发布时间】：2014-01-23 06:09:48
【问题描述】：

由于某种原因，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 上查看该问题。

谢谢，盎司

【问题讨论】：

一点 html 和更多的 css 会很棒，因为现在还不清楚#main-menu 到底是哪个元素，以及其中的内容。
如果条件放在 CSS 中：<meta http-equiv="X-UA-Compatible" content="IE=8" />。有帮助吗？
谢谢，我已经添加了一些HTML代码
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">为什么不添加htis？？

标签： internet-explorer-8 css

【解决方案1】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

你为什么不添加这个？这是您的消息来源的答案。试试看

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

【讨论】：

【解决方案2】：

它破坏布局的原因是 IE8 不支持 HTML5 元素，例如 nav。

您可以改为使用<div> 标签或尝试包含javascript 解决方法HTML5shiv 以支持IE

【讨论】：

他没有使用 HTML5，他的 html 中没有名为 nav 的元素
@OzPorat 请尝试我建议的一些修复并告诉我

【解决方案3】：

首先，确保使用选择器定位 li 元素

#navigation #main-menu li

也可以尝试使用float 而不是display: inline;

#navigation #main-menu li {
    display: block;
    float: left;
    margin-right: 10px;
}

【讨论】：

【解决方案4】：

正如 Surjith SM 所说，IE8 不支持导航等 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?

【讨论】：