Question

ie8中的菜单有两个问题。如果您在ie8中访问此链接http://betapwr.pokerworldratings.com/，您会看到菜单没有下拉到“房间”标签下。我把“溢出：可见”放在包含它的所有东西上，但没有骰子。第二个问题是在右侧可见的搜索栏缺失。我检查了元素，并没有看到“显示”有什么问题。您可以在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>

接下来，找不到您在文档标题中包含的html5.js，因此您的header和footer HTML5标记实际上并未在IE中正常生效。

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

.admin-menu ul li { 显示：内联; / 这将针对IE7 * / }

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

#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;        
}

Internet Explorer中缺少菜单项

1 个答案: