css - Internet Explorer 中缺少菜单项

Question

我在 ie8 中的菜单有两个问题。如果您访问此链接 http://betapwr.pokerworldratings.com/在 ie8 中，您会看到菜单不会下拉到“房间”选项卡下。我把“溢出:可见”放在所有包含它但没有骰子的东西上。第二个问题是应该在右侧可见的搜索栏丢失了。我检查了元素，没有发现“显示”有任何问题。您可以在 Chrome 中看到正确的设置。我错过了什么？

Answer 1

首先，您的顶级菜单完全乱七八糟，因为您没有正确嵌套列表项。你目前有这个:

<li class="drop-work"><a href="#">Rooms</a>
   <ul>
      <a href=""><li>Room 1</li></a>
      <a href=""><li>Room 2</li></a>
   </ul>
</li>

您将一些 a 标签嵌套为列表标签的子标签，这不是正确的标记，因此您可以通过以正确的方式格式化子菜单来修复该部分:

固定

<li class="drop-work"><a href="#">Rooms</a>
   <ul>
      <li><a href="">Room 1</a></li>
      <li><a href="">Room 2</a></li>
   </ul>
</li>

接下来，您在文档 header 中包含的 html5.js shiv 未找到，因此您的 header 和 footer HTML5 标签实际上没有被正确地 shivved在 IE 中。

现在，您的顶级菜单在 IE8 中工作正常，但在兼容模式下在 IE8 中看起来很糟糕，您可以通过将列表项设置为 display:inline 而不是使用css hack，像这样:

.admin-menu ul li { 显示:内联；/ 这将针对 IE7 */

然后将您的 #admin-bar 拉伸(stretch)到文档的左侧和右侧，您可以将规则修改为以下内容:

#admin-bar {
    overflow:visible;
    position: fixed;
    top:0;
    right:0;
    left:0;
    z-index: 99999;
    background:url(images/top-menu.png) repeat-x #000;
    background-image: -moz-linear-gradient(top,#0078CE 0,#006AAD 100%);
    background-image: -ms-linear-gradient(top,#0078CE 0,#006AAD 100%);
    background-image: -o-linear-gradient(top,#0078CE 0,#006AAD 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0078CE),color-stop(100%,#006AAD));
    background-image: -webkit-linear-gradient(top,#0078CE 0,#006AAD 100%);
    background-image: linear-gradient(to bottom,#0078CE 0,#006AAD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0078CE',endColorstr='#006AAD');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0078CE', endColorstr='#006AAD')";
    border-bottom:3px solid #005991;        
}