IE8显示内嵌块问题

由于某些原因，IE-8不会内联显示我的菜单。（见图片附后）我的代码是：IE8显示内嵌块问题

#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。

感谢，奥兹

来源

2014-01-05 Oz Porat

一个小的HTML和更多的CSS将是伟大的，因为现在还不清楚究竟哪个元素是＃主菜单，以及它里面的内容。 – drip

CSS内部条件如下：''。它有帮助吗？ – yuvi

谢谢，我添加了一些HTML代码 –

首先，确保你的目标在li元素与你的选择

#navigation #main-menu li

以及尝试使用float代替display: inline;

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

来源

2014-01-06 10:28:44 jjgrainger

谢谢，我试过了。它没有工作 –

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

为什么你不添加th是？这是你的来源的答案。给它尝试

IE8将会把它作为一个块级元素，除非你使用float

注：

我发布的文档类型的评论，但它已损坏，所以发布本作回答

更新时间：

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

来源

2014-01-06 10:38:25

它打破了布局的原因是IE8一点儿也不支持HTML5元素，如nav。

相反，你可以使用<div>标签或尝试包括JavaScript解决方法HTML5shiv支持IE

来源

2014-01-06 10:44:45

他不使用HTML5，他的html中没有元素叫nav – yuvi

看起来你是对的。 –

@OzPorat请尝试一些修复我建议并让我知道 –

正如Surjith SM表示，IE8不支持HTML5元素，如导航。这个问题是通过添加以下代码解决：

<!--[if lte IE 8]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

html5shi（M | V）创造了所有的HTML5元素，以便从你的CSS样式可以踢在文档元素为IE的默认行为是忽略未知。元素。欲了解更多信息，请参阅header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?

来源

2014-01-07 06:37:42

IE8显示内嵌块问题

回答

相关问题