IE和Chrome的具體問題 - Firefox的工作正常顯示導航

當我調整我的瀏覽器窗口的大小時，我收到了一些來自IE和Chrome的意外行爲。導航菜單不會保持鎖定狀態。IE和Chrome的具體問題 - Firefox的工作正常顯示導航

我知道這個問題與標誌右對齊的長文本有關。在這種情況下，「漫畫訂閱...」文本。當此文本的「C」到達最後一個導航菜單項的邊緣時，即導航菜單丟失時。

IE截圖： Internet Explorer http://www.jaylefler.com/ie.png

Chrome的截圖： Chrome http://www.jaylefler.com/chrome.png

Firefox的截圖： Firefox http://www.jaylefler.com/firefox.png

<!DOCTYPE html> 
<html> 

<head> 
<title>Demolition Comics Subscription Management System</title> 

<style> 

body { 
    font-family: Arial, Helvetica, Verdana; 
    margin: 0; 
    padding: 0; 
    background-repeat:no-repeat; 
    background-color:#FAF8CC; 
} 

nav { 
    width: 100%; 
    height: 30px; 
    background-color:rgb(255,200,0); 
    border-bottom:1px solid #000; 
    font-weight: bold; 
} 

nav ul{ 
    padding:0; 
    margin: 0; 
    min-width: 755px; 
    overflow: hidden; 
} 

nav ul li{ 
    float: left; 
    margin:0; 
    padding:0; 
    list-style:none; 
    background-color:rgb(255,200,0); 
    border-right:1px solid #000; 
} 

nav ul li a{ 
    text-align:center; 
    text-decoration:none; 
    width:150px; 
    height: 25px; 
    padding-top: 5px; 
    display:block; 
    color:#000; 
} 

nav ul li ul{ 
    position:absolute; 
    visibility:hidden; 
    min-width: 150px; 
    border-bottom: 1px solid #000; 
    border-left: 1px solid #000; 
    margin-left: -1px; 
} 

nav ul li:hover ul{ 
    visibility: visible; 
} 

nav ul li ul li { 
    float: none; 
    width:200px; 
    border-bottom: 1px solid #000; 
    border-top: 1px solid #000; 
} 

nav ul li ul li a { 
    text-align:center; 
    width:200px; 
} 

nav a:hover { 
    background-color:#000; 
    color:rgb(255,200,0); 
} 

#logo { 
    background-color: black; 
    width: 100%; 
    min-width: 800px; 
    color: rgb(255,200,0); 
    height: 100px; 
    margin:0px; 
} 

#logo img { 
    padding: 10px; 
    vertical-align: middle; 
} 

.left_part, .right_part { 
    height: 100px; 
} 

.left_part { 
    float: left; 
} 

.right_part { 
    float:right; 
    width:500px; 
    margin-top: 10px; 
    text-align: right; 
} 

.right_part a { 
    line-height: 10x; 
    color: rgb(255,200,0); 
    vertical-align:middle; 
    text-align:right; 
    text-decoration:none; 
    padding: 25px; 
} 

#contents, #footer { 
    background:#fff; 
    width:1024px; 
    padding:20px; 
    padding-top:5px; 
} 

#contents { 
    margin:15px auto 0; 
    border: 5px solid black; 
    border-bottom: 0; 
    border-radius: 15px 15px 0 0; 
    /*box-shadow: 6px 6px 4px 4px #000;*/ 
    box-shadow: 10px 15px 5px #888888; 
    min-height: 550px; 
    background-color:#F0F7FF; 
} 

#footer { 
    background-color: rgb(255,200,0); 
    border-radius: 0 0 15px 15px; 
    /*box-shadow: 6px 6px 4px 4px #000;*/ 
    box-shadow: 10px 10px 5px #888888; 
    border: 5px solid black; 
    border-top:1px dashed #000; 
    color:#000; 
    margin:0 auto 40px; 
} 

.bigHead { 
    font-size: 2em; 
    margin-top: 0px; 
    margin-bottom: 10px; 
    margin-right: 22px; 
} 

.littleNavi { 
    font-size: 1em; 
} 

</style> 

</head> 

<body> 

<div id="logo"> 

    <div class="left_part"> 
     <img src="demo.gif"> 
    </div> 

    <div class="right_part"> 
     <div class="bigHead">Comic Subscription Management</div> 
     <div class="littleNavi"><a href="index.php">CONTACT US</a> - <a href="#">FAQ</a> - <a href="index.php">ABOUT</a></div> 
    </div> 

</div> 

<nav> 
    <ul> 


     <li><a href="index.php">HOME</a></li> 
     <li><a href="index.php">PROFILE</a></li> 
     <li><a href="#">MANAGE SUB</a> 
      <ul> 
       <li><a href="index.php">VIEW TITLES</a></li> 
       <li><a href="index.php">ADD TITLE</a></li> 
       <li><a href="index.php">MODIFY TITLE</a></li> 
       <li><a href="index.php">REMOVE TITLE</a></li> 
      </ul> 
     </li> 
     <li><a href="index.php">NEW RELEASES</a></li> 
     <li><a href="index.php">E-MAIL</a></li> 
    </ul> 
</nav> 

<div id="contents"> 

    <h2>Hello ladies and gentlemen!</h2> 
</div> 

<div id="footer"> 
    Text here 
</div> 

</body> 

</html>

來源

2013-02-20 JimRomeFan

這個問題似乎是在<nav>不清除浮動列表項。

將overflow:hidden;加到您的<nav>元素中，問題應該解決。 overflow:hidden;將迫使一個容器擴大到其漂浮的兒童的身高。

來源

2013-02-20 19:01:00 Sean

創建該導航元素和標誌之間的空間，所以出現的背景顏色。我仍然需要導航欄直接放在標誌下面。 – JimRomeFan 2013-02-20 19:03:37

在導航li上放置{overflow：hidden}並導航元素。我的猜測是線高是一個問題。 – isherwood 2013-02-20 19:09:36

到nav和margin:45px auto;添加position: absolute;到#contents

來源

2013-02-20 19:15:56

謝謝，這解決了這個問題。 – JimRomeFan 2013-02-20 19:19:37

其實，當我這樣做，它阻止了我的下拉列表工作。起初我沒有注意到它。 – JimRomeFan 2013-02-20 22:22:15

更新瞭解決此問題的答案。 – 2013-02-20 22:44:25

IE和Chrome的具體問題 - Firefox的工作正常顯示導航

回答

相關問題