为什么Bootstrap导航栏在IE8中显示不正常？

Question

我有一个带固定导航栏的简单页面，但它在IE中显示得非常糟糕。

这是截图：

但在FireFox中看起来：

我认为Bootstrap问题应该由此解决：

 <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

在我的标题中。

这是我的html：

   <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
      <a class="brand" href="./index.html">link</a>    
    </div>
  </div>
   </div>
<div class="subnav subnav-fixed">
  <ul class="nav nav-pills">
    <li><a href="index.html">HOME</a></li>
   <li><a href="portfolio.html">PORTFOLIO</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li><a href="careers.html">CAREERS</a></li>
   <li><a href="contacts.html">CONTACTS</a></li>
  </ul>
</div>

我该如何解决这个问题？如果你需要CSS我会添加它。

Answer 1

在IE中链接其他样式表，如果是具有以下特定代码的州语句。您可能需要牺牲导航栏的某些部分，例如渐变（我不认为IE8支持那些）。

ul.nav {
    padding: 10px 0;
    display: block;
    text-align: center;
    background: white;
    font-size: 12px;
}
ul.nav li {
    display: inline;
    text-align: center;
    padding: 10px;
    border-right: 1px solid #f0f0f0;
}
ul.nav li:last-child {
    border-right: none;
}
ul.nav li a {
    text-decoration: none;
    color: black;
}

JSFiddle Demo