Firefox和Chrome上的CSS/XHTML顯示問題

當前遇到讓CSS正確顯示樣機頁面的問題。試圖做一個雙列頁面，標題，菜單，左/右列，然後頁腳。除了菜單部分外，一切都很好。該頁面在Internet Explorer中正確顯示，但它顯示菜單div的開頭與Firefox和Chrome上的ul之間的較大差距。以下是我的XHTML和CSS。Firefox和Chrome上的CSS/XHTML顯示問題

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> 
    <title>Template</title> 
    <link rel = "stylesheet" 
      type = "text/css" 
      href = "Layout.css" /> 
    </head> 

    <body> 

    <div id = "all"> 

     <div id = "head"> 
     <p>Header</p> 
     </div> 

     <div id = "menu"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Weapons</a></li> 
      <li><a href="#">Characters</a></li> 
      <li><a href="#">Collectables</a></li> 
      <li><a href="#">Multiplayer</a></li> 
     </ul> 
     </div> 

     <div id = "left"> 
     <p>Left Content</p> 
     </div> 

     <div id = "right"> 
     <p>Content</p> 
     </div> 

     <div id = "footer"> 
     <p>Footer</p> 
     </div> 

    </div> 

    </body> 

</html>

CSS

#all { 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#head { 
    background-color: black; 
    border: black solid 1px; 
} 

#menu { 
    width: 100%; 
    background-color: red; 
    float: left; 
} 

#menu ul { 
    margin-left: -2.5em; 
} 

#menu li { 
    list-style-type: none; 
    float: left; 
    width: 8em; 
    text-align: center; 
    border: black solid 1px; 
} 

#menu a { 
    display: block; 
    text-decoration: none; 
    color: white; 
} 

#menu a:hover { 
    background-color: yellow; 
} 

#left { 
    float: left; 
    width: 200px; 
    background-color: red; 
    min-height: 30em; 
} 

#right { 
    float: left; 
    width: 600px; 
    background-color: gray; 
    min-height: 30em; 
} 

#footer { 
    clear: both; 
    color: white; 
    background-color: black; 
    text-align: center; 
    min-height: 30px; 
}

來源

2011-10-16 KennyH

更新Ul風格從

#menu ul { 
    margin-left: -2.5em; 
}

#menu ul { 
margin: 0; 
padding: 0; 
}

來源

2011-10-16 18:26:46 Sanooj

Firefox和Chrome上的CSS/XHTML顯示問題

回答

相關問題