Question

我的网站在Chrome上工作正常，但是当我在IE上运行时（我的第8方需要第三方要求网站工作在IE 11和Chrome上）水平菜单中的子菜单项变为有序列表。如何更正< / p>

#menu {
width:960px;
position:relative;
margin: 0px auto;
background:#0093d0;
}
nav {
 position:relative;
}
nav ul {
margin:0;
padding:0;
}
nav ul li {
margin:0;
padding:0;
list-style:none;
display:inline-block;
position:relative;
}
nav ul li a {
font:bold 12px Arial;
text-transform:uppercase;
color:#fff;
padding:7px 10px;
display:inline-block;
text-decoration:none;
}
nav ul li:hover > a {
text-decoration:none;
color:#fff;
background:#ccc;
}
nav ul li a.current {
background:#fff;
color:#0093d0;
}
nav ul ul {
min-width:200px;
position:absolute;
top:100%;
z-index:666;
background:#0093d0;
display:none;
}
nav li:hover > ul {
display:block;
}

nav ul ul li {
display:block;
width:100%;
}
nav ul ul a {
padding:7px 10px;
display:block;
color:#fff;
border-bottom:1px solid #ddd;
text-align:left;
}


<!DOCTYPE html><!--using html 5-->
<html lang="en-US">
<head>

<meta name="description" content="for family safety">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-    scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />         
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="index.css" rel="stylesheet" type="text/css" />
 </head>
  <body>
 <div id="header"><!--starts of header-->
<div id="site_title">
<h2>'IMPROVING HSE AT HOME' site!</h2>
<img class="image_wrapper image_fr" src="images/Logo_lockup.jpg" alt="image" />
<br><br><br>
</div>
</div>
    <div id="menu"> <!--starts of menu-->
    <nav>
    <ul>
    <li><a href="index1.html">Home</a></li>
    <li><a href="health.html" class="current">Health</a></li>

    <li><a href="safety.html">Safety</a></li>

    <li><a href="environment.html">Environment</a></li>

</ul>
</nav>
</div><!--end of menu-->
<div id="main"><!--start of main-->
 <div class="inner_box last">
 <div class="col_w900_last">
     <div class="col_w420 lp_box float_l">
        <div class="inner_box">
            <h2>HEALTH</h2>
               <P class="intro">Due to weather conditions in our Region, d healthy places to live.<br>

        </div>
    </div>
    <div class="col_w420 float_r">
        <div class="post_box">
        <div class="post_header">
          <img width="400" height="400" src="images/Health_93453718.jpg" alt="Image 001" />
           </div> 
    </div>
   </div>
 </div>
</div> 
</div>  <!--end of main-->
<div id="footer">

</div> <!-- end of footer -->
</body>
</html>

Answer 1

您需要在list-style:none;标记上添加ul而不是li标记，就像这样

nav ul{
list-style: none;
}

试试这个。

Answer 2

你必须清除IE8中的浮动。尝试添加一个样式清晰的div：在浮动元素之后再次测试。

顺便说一下，为什么你会使用IE8？ IE8中不支持大量的HTML5和CSS3。 IE9好一点，但IE10是另一个世界。如果您不支持IE8，请务必使用IE8测试该网站。

css没有在IE8上加载

2 个答案: