Javascript HTML下拉栏在internet explorer上不起作用_Javascript_Html_Css

Javascript HTML下拉栏在internet explorer上不起作用

javascript html css

Javascript HTML下拉栏在internet explorer上不起作用,javascript,html,css,Javascript,Html,Css,CSS和JavaScript目前，在我的HTML上，我制作了一个下拉栏，它可以在Chrome和firefox上使用，但不能在internetexplorer上使用。我需要下拉栏来使用internet explorer 这是我的CSS代码： <body bgcolor='#52CC7A'> <style type="text/css"> * { padding: 0; margin: 0; } body { padding: 5px; fon

CSS和JavaScript目前，在我的HTML上，我制作了一个下拉栏，它可以在Chrome和firefox上使用，但不能在internetexplorer上使用。我需要下拉栏来使用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>

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


*{填充：0；边距：0；}
正文{padding:5px；字体系列：Arial、Helvetica、sans serif；}
ul{列表样式：无；z索引：999}
ul li{float:left；padding right:1px；position:relative；}
ul a{显示：表格单元格；垂直对齐：中间；宽度：100px；高度：50px；文本对齐：中心；背景：#69C；颜色：#FFF；文本装饰：无；}
ula：悬停{背景：#09C；}
li>ul{显示：无；位置：绝对；左侧：0；顶部：100%；}
li:hover>ul{display:block；}
li>ulli{填充：0；填充顶部：1px；}
li>ulli>ul{左：100%；顶部：0；左填充：1px；}
li>ulli>ulli{宽度：100px；}
li:hover>a{background:#09C；}

这是我的HTML代码：

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

<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上工作？谢谢：）

在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>

我建议显示更多代码并给出IE的版本

可能您缺少一个

作为您文档的第一行，IE需要：hover和>选择器来，正如其中一条评论中提到的，它在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; 
}

ula
{ 
显示：inline block；/*可能是由于格式错误的html？你需要解释为什么你认为它不起作用，并发布更多你的html代码它在IE8+中对我起作用…需要证据吗？在fiddlewell中复制它不，我被告知它不是html代码，它在css代码中，所以我需要找到不同的代码来完成它。是的，这就是我的想法我似乎找不到任何其他代码