Firefox 和 Chrome 上的 CSS/XHTML 显示问题答案

【问题标题】：CSS/XHTML Display Issue on Firefox and ChromeFirefox 和 Chrome 上的 CSS/XHTML 显示问题
【发布时间】：2011-10-16 18:20:22
【问题描述】：

目前在让 CSS 正确显示模型页面时遇到问题。尝试使用页眉、菜单、左/右列和页脚创建两列页面。除了菜单部分，一切看起来都不错。该页面在 Internet Explorer 中正确显示，但它显示菜单 div 的开头与 Firefox 和 Chrome 上的 ul 之间存在很大差距。下面是我的 XHTML 和 CSS。

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;
}

【问题讨论】：

标签： html css firefox google-chrome xhtml

【解决方案1】：

更新您的Ul 样式来自

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

到

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

【讨论】：