Question

CSS和JavaScript以及我的HTML我已经制作了一个下拉栏，它适用于Chrome和Firefox，但不适用于Internet Explorer。我需要下拉栏才能在Internet Explorer上工作。

这是我的 CSS 代码：

<body bgcolor='#52CC7A'>
        <style type="text/css">
    * { padding: 0; margin: 0; }
    body { padding: 5px; font-family: Arial, Helvetica, sans-serif; }
    ul { list-style: none; z-index: 999 }
    ul li { float: left; padding-right: 1px; position: relative; }
    ul a { display: table-cell; vertical-align: middle; width: 100px; height: 50px; text-align: center; background: #69C; color: #FFF; text-decoration: none; }
    ul a:hover { background: #09C; }
    li > ul { display: none; position: absolute; left: 0; top: 100%; }
    li:hover > ul { display: block; }
    li > ul li { padding: 0; padding-top: 1px; }
    li > ul li > ul { left: 100%; top: 0; padding-left: 1px; }
    li > ul li > ul li { width: 100px; }
    li:hover > a { background: #09C; }
</style>

这是我的 HTML 代码：

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Players</a>
        <ul>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>

还有更多内容，但这是简化的。

有没有人知道如何更改任何代码或更改某些内容以使其在Internet Explorer上运行？谢谢:)）

Answer 1

我建议显示更多代码并提供IE版本。

可能您缺少<!DOCTYPE html>作为文档的第一行，IE需要以下内容：hover和＆gt;选择器为work

Answer 2

在IE中为我工作（在8和11中测试）。我更正了你的HTML：

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Players</a>
        <ul>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
        </ul>
    </li>
</ul>

Answer 3

如其中一条评论所述，它在IE8 +

中完全适合我

我没有经历过所有的CSS，但在IE7中似乎display:table-cell正在播放......众所周知，它在IE7中存在问题。如果您将其更改为显示inline-block并添加行高50px，以便文本垂直对齐，那么您应该没问题。所以，这就是我要改变的一切......

ul a 
{ 
    display: inline-block;  /* <-- change to inline-block  */
    line-height:50px; /* <-- align text vertically  */
    *display:inline; /* <-- IE7 hack  */
     zoom:1; /* <-- IE7 hack */
    vertical-align: middle; 
    width: 100px; 
    height: 50px; 
    text-align: center; 
    background: #69C; 
    color: #FFF; 
    text-decoration: none; 
}

请注意我为IE7添加了一个hack，因为它不支持inline-block

最后，这就是它的外观......

enter image description here

HTML下拉栏在Internet Explorer上不起作用

3 个答案: