網站在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）

回答

相關問題