网站在IE 9及以下版本中未正确呈现（CSS/HTML）

-3

我的网站在IE9和earleir（IE10以及FireFox中正常工作）下正常工作时出现问题。问题在于，在访问主页（或导航栏链接的任何页面）时，每个导航栏链接都列在另一个的顶部，而不是并排排列。奇怪的是，一旦在主页上点击搜索按钮，一切都开始正常工作。网站在IE 9及以下版本中未正确呈现（CSS/HTML）

我搜索了该网站并尝试了推荐的建议，例如更改文件中元标记的内容，但无济于事。

编辑：有人建议我加入一个截图，但我无法这样做，因为我没有足够的声望点。

HTML文件，包括导航栏：

//<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE10'/> 
<link rel="stylesheet" href='jsddm.css'> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

<script> 
$(function(){ 

    $("ul.jsddm li").hover(function(){ 
    $('ul:first',this).css('visibility', 'visible'); 

    }, function(){ 
    $('ul:first',this).css('visibility', 'hidden'); 

    }); 

    }); 
</script> 



<ul class="jsddm"> 
<li><a href="home"><img src="./styles/icons/sitelogolowres.png"> APPraisal</a> 
<li><a href="#">OS</a> 
    <ul> 
     <li><a href="#">Android</a></li> 
     <li><a href="#">iOS</a></li> 
    </ul> 
</li> 
<li><a href="#">Rating</a> 
    <ul> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
     <li><a href="#">4</a></li> 
     <li><a href="#">5</a></li> 
    </ul> 
</li> 
<li><a href="login">Login</a></li> 
<li><a href="register">Register</a></li> 
</ul> 

</div> 
<br/><br/>

CSS文件：

ul.jsddm 
{ 
    margin: 0; 
    padding: 0; 
    position: relative; 
    line-height: 2.0em; 

} 

ul.jsddm a 
    { 
    color: #FFF; 
    background-color: #333; 
    border: 1px solid #444; 
    display: block; 
    text-decoration: none; 
    text-align: center; 
    width: auto; 
} 

ul.jsddm a:hover 
{ 
    color: #000; 
    background-color: #FFF; 
} 

ul.jsddm > li 
{ 
    position: relative; 
    float: left; 
    list-style: none; 
    width: 20%; 
} 

ul.jsddm li ul li 
{ 
    list-style:none; 
} 

ul.jsddm ul 
{ 
    position: absolute; 
    width: 100%; 
    top: 33px; 
    padding: 0; 
    visibility: hidden; 
}

来源

2013-04-30 user2238415

试试这个

<html> 
<head> 
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<style> 
    ul.jsddm, ul.flyout 
    { 
     margin: 0; 
     padding: 0; 
     line-height: 2.0em; 
     list-style-type:none; 
    } 
    ul.jsddm li 
    { 
     float: left; 
     width: 19%; 
     position:relative; 
    } 
    ul.jsddm a 
    { 
     color: #FFF; 
     background-color: #333; 
     border: 1px solid #444; 
     display: block; 
     text-decoration: none; 
     text-align: center; 
     width: auto; 
    } 
    ul.flyout li 
    { 
     width: 100%; 
     display:block; 
     float:none; 
    } 
    ul.jsddm a:hover 
    { 
     color: #000; 
     background-color: #FFF; 
    } 
    ul.flyout 
    { 
     display:none; 
     position:absolute; 
     top:34px; 
     left:0px; 
     width:100%; 
    } 
    ul.jsddm li:hover ul.flyout 
    { 
     display:block; 
    } 
</style> 
</head> 
<body> 

<div> 
    <ul class="jsddm"> 
     <li><a href="home">APPraisal</a> 
     <li><a href="#">OS</a> 
      <ul class="flyout"> 
       <li><a href="#">Android</a></li> 
       <li><a href="#">iOS</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Rating</a> 
      <ul class="flyout"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
       <li><a href="#">5</a></li> 
      </ul> 
     </li> 
     <li><a href="login">Login</a></li> 
     <li><a href="register">Register</a></li> 
    </ul> 
</div> 
</body> 
</html>

我已经改变了下拉到CSS。主要的问题是ul.jsddm>李，它只是风格的第一个李和有问题没有默认李风格

来源

2013-04-30 21:29:22 user989952

感谢您的答复！这解决了链接堆叠的问题。由于某些原因，下拉选项不再适用（即Andorid，iOS等）。我必须包含其他内容才能使展开式广告选项有效吗？ – user2238415 2013-04-30 22:32:24

在andriod和ios之前，下拉式工作是否已经完成？那会让我感到惊讶，因为我并不认为悬停在移动设备上起作用。网页浏览器上的下拉菜单可以正常工作吗？ – user989952 2013-04-30 23:35:06

对不起，我的意思是下拉菜单在IE中不起作用。我只是键入Android和iOS来澄清什么下拉的意思。对困惑感到抱歉！ – user2238415 2013-05-01 00:17:36

网站在IE 9及以下版本中未正确呈现（CSS/HTML）

回答

相关问题