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显示问题

回答

相关问题