如何在谷歌瀏覽器中使此菜單的「清除：兩者都有效」？

我已經建立了一個簡單的網站，其中包含清晰的導航菜單：均應用了CSS樣式。在這個網站上，有一個基本的標誌和一組圖標。徽標左側浮動，而圖標右側浮動。該網站看起來像這樣在Firefox和Chrome ...如何在谷歌瀏覽器中使此菜單的「清除：兩者都有效」？

http://i.stack.imgur.com/nPYuL.jpg

不同的是，瀏覽器無法接受明確：CSS文件中的兩個（應用於菜單的DIV）。我怎樣才能使它工作？

這裏的HTML ...

<!DOCTYPE html> 
<html><head> 

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" /> 



<script type="text/javascript"> 

function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

function MM_swapImgRestore() { //v3.0 
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 

function MM_findObj(n, d) { //v4.01 
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
    if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImage() { //v3.0 
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
} 
    </script> 


    <title>Matiny's Sample Site 1</title> 
</head> 


<body onLoad="MM_preloadImages('images/thumbs/A%20Thumbnail%202.jpg','images/thumbs/B%20Thumbnail%202.jpg','images/thumbs/S%20Thumbnail%202.jpg','images/thumbs/J%20Thumbnail%202.jpg','images/thumbs/T%20Thumbnail%202.jpg','images/thumbs/P%20Thumbnail%202.jpg','images/thumbs/A Thumbnail 2.jpg','images/thumbs/B Thumbnail 2.jpg','images/thumbs/S Thumbnail 2.jpg','images/thumbs/J Thumbnail 2.jpg','images/thumbs/T Thumbnail 2.jpg','images/thumbs/P Thumbnail 2.jpg')"> 


<div id="main"> 

    <div id="logo"> 
     <img src="images/Icons/Logo.png"/> 
    </div> 

    <div id="sm-icons"> 
     <ul> 
      <li><a href="http://www.facebook.com"><img src="images/Icons/facebook_64.png" id="Image7" onMouseOver="MM_swapImage('Image7','','images/Icons/facebook_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a> 
      <li><a href="https://www.rss.com/"><img src="images/Icons/rss_64.png" id="Image8" onMouseOver="MM_swapImage('Image8','','images/Icons/rss_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a> 
      <li><a href="https://twitter.com/"><img src="images/Icons/twitter_64.png" id="Image9" onMouseOver="MM_swapImage('Image9','','images/Icons/twitter_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a> 
      <li><a href="https://www.youtube.com/"><img src="images/Icons/youtube_64.png" id="Image10" onMouseOver="MM_swapImage('Image10','','images/Icons/youtube_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a> 
     </ul> 
    </div> 

    <div id="menu"> 
    <ul> 
     <li><a href="index.html">WELCOME</a></li> 

     <li><a href="#">ABOUT</a> 

      <ul> 
       <li><a href="">The Man</a></li> 
       <li><a href="">The Myth</a></li> 
       <li><a href="">The Legend</a></li> 
      </ul> 

     </li> 

     <li><a href="games.html">GAMES</a> 

      <ul> 
       <li><a href="galleries/Ezio.html">Assasin's Creed 2</a></li> 
       <li><a href="galleries/Bruce.html">Batman Arkham City</a></li> 
       <li><a href="galleries/Rico.html">Just Cause 2</a></li> 
       <li><a href="galleries/Prince.html">Prince of Persia</a></li> 
       <li><a href="galleries/Boss.html">Saints Row 3</a></li> 
       <li><a href="galleries/TDU2.html">Test Drive Unlimited 2</a></li> 
      </ul> 

     </li> 

     <li><a href="contact.html">CONTACT</a></li> 
    </ul> 

</div>

而這裏的CSS ...

/* CSS Document */ 

/* Reset */ 

html, body { margin: 0; padding: 0; border: 0; background: #000; font-size:16px; } 


h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
    font-size:100%; 
    font-weight: normal; 
    font-style: normal; 
    line-height: 100%; 
    text-indent: 0; 
    text-decoration: none; 
    color: #000; 
    } 

/* Divisions */ 



#main { width:900px; margin:0 auto; background-color:#FFF; padding: 30px 100px;} 

#logo { margin:30px; float:left} 

#sm-icons { float:right; } 
#sm-icons ul li {display:inline} 
#sm-icons ul {margin-top: 30px} 

#menu {clear:both; 
    width: 800px; 
    margin-top: 50px; 
    margin-right: auto; 
    margin-bottom: 50px; 
    margin-left: auto; 
    z-index: 6; 
    position: relative; 
} 
#menu ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 
#menu ul li { 
    float: left; 
    position: relative; 
} 
#menu ul li a { 
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
    font-size: 100%; 
    color: #CCC; 
    text-decoration: none; 
    background-color: #333; 
    text-align: center; 
    display: block; 
    height: 50px; 
    width: 200px; 
    line-height: 50px; 

    transition: background .5s, font-size .2s; 
} 
#menu ul li a:hover { 
    font-size: 120%; 
    color: #000; 
    background-color: #CCC; 
} 
#menu ul li ul { 
    position: absolute; 
} 
#menu ul li ul li a { 
    visibility: hidden; 
    height: 0px; 
    opacity:.5; 

    transition: all .2s ease-out; 
} 
#menu ul li:hover ul li a { 
    height: 50px; 
    visibility: visible; 
    opacity:1; 
    transition: all .3s ease-out; 

} 


#banner-pictures {margin-bottom: 50px} 

#central-content { width: 800px; text-align:center; margin:25px auto;} 

#central-max width { width: 100%; } 

#footer {clear:both; border-top: 1px #666 solid} 


/* Text Elements */ 

p    { color:#000; font-size:14px; line-height:120%; 
        margin:15px 0; margin-bottom: 30px } 
p .left   { margin: 1.5em 1.5em 1.5em 0; padding: 0; } 
p .right  { margin: 1.5em 0 1.5em 1.5em; padding: 0; } 



blockquote  { color:#000; font-size:12px; } 

strong   { font-weight: bold; } 
em    { font-style: italic; } 

/* Headings */ 

h1, h2, h3, h4, h5, h6 { font-weight: bold; color:#000 } 

h1 { font-size:24px; } 
h2 { font-size:22px; padding-bottom: 15px; } 
h3 { font-size:18px; } 
h4 { font-size:14px; } 
h5 { font-size:14px; } 
h6 { font-size:14px; } 

/* Misc */ 

.date {} 
.footer-text {text-align:center} 
.thumbs {padding: 10px} 


#wrapper { 
    display: block; 
    height: 300px; 
    width: 900px; 
    margin: auto; 
} 
#container { display:block; background-color:#FFC; float:left; 
height: 300px; width: 900px; overflow:auto; } 

#slider { 
    display: block; 
    float: left; 
    height: 300px; 
    width: 900px; 
    overflow: hidden; 
    position: absolute; 
    z-index: 4; 
} 

.slides { 
    width: 900px; 
    overflow: hidden; 
    margin: 0 auto; 
    text-align:center; 
} 

ul, li { 
    margin: 0; 
    padding: 0; 
} 

.slides ul { 
    width: 5400px; 
    position: relative; 
    -moz-animation: slide 36s infinite; 
    -webkit-animation: slide 36s infinite; 
    } 

.slides li { 
    float:left; 
    list-style: none; 
    position: relative; 
    } 
.slides a { text-decoration:none;} 

h5 { 
    position:absolute; 
    bottom: 5px; 
    width: 100%; 
    background: rgba(0,0,0,.4); 
    color: white; 
    padding: 20px 10px; 
    font-size:24px; 
    margin-bottom: 0; 
    -moz-animation: headings 36s infinite; 
    -webkit-animation: headings 36s infinite; 
} 

.slides ul:hover, 
.slides ul:hover h5 { 
    -moz-animation-play-state: paused; 
    -webkit-animation-play-state: paused; 
} 


@-moz-keyframes slide { 
    0% {left: 0;} 
    15% {left: 0;} 

    20%, 30% {left: -900px;} 
    35%, 45% {left: -1800px;} 
    50%, 60% {left: -2700px;} 
    65%, 75% {left: -3600px;} 
    80%, 90% {left: -4500px;} 

    100%{left:0px;} /* Reset to Zero */ 
} 

@-moz-keyframes headings { 
    15%, 20%, 30%, 35%, 45%, 50%, 60%, 65%, 75%, 80%, 90% 
    {bottom: 5px;} 
    18%, 33%, 48%, 62%, 78%, 93% /* 2% before the 1st column */ 
    {bottom: -200px;} 
} 

@-webkit-keyframes slide { 
    0% {left: 0;} 
    15% {left: 0;} 

    20%, 30% {left: -900px;} 
    35%, 45% {left: -1800px;} 
    50%, 60% {left: -2700px;} 
    65%, 75% {left: -3600px;} 
    80%, 90% {left: -4500px;} 

    100%{left:0px;} /* Reset to Zero */ 
} 

@-webkit-keyframes headings { 
    15%, 20%, 30%, 35%, 45%, 50%, 60%, 65%, 75%, 80%, 90% 
    {bottom: 5px;} 
    18%, 33%, 48%, 62%, 78%, 93% /* 2% before the 1st column */ 
    {bottom: -200px;} 
}

來源

2014-02-20 BigDaddyMat

哪裏碼？ – witherwind

我會將div中的浮動元素包裝爲「overflow：hidden」來避免此問題。這種方式更清潔。 –

如果您縮小共享的代碼以隔離問題，會更好。它不僅使其他人更易讀，而且您自己也可能更容易排除故障。 – Mal

最好，環繞頂部項目一個div並將其設置爲overflow: hidden。但是，如果你要離開HTML，因爲它，嘗試同樣的菜單：

#menu { 
    overflow: hidden; 
}

（對我的作品在你的代碼測試。）

來源

2014-02-20 02:07:41

另外，Mal的評論也起作用。但編輯#Menu什麼都沒做。 – BigDaddyMat

如何在谷歌瀏覽器中使此菜單的「清除：兩者都有效」？

回答

相關問題