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的工作正常显示导航

回答

相关问题