Firefox和Chrome上的CSS/XHTML显示问题_Html_Css_Firefox_Google Chrome_Xhtml

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

html css firefox google-chrome

Firefox和Chrome上的CSS/XHTML显示问题,html,css,firefox,google-chrome,xhtml,Html,Css,Firefox,Google Chrome,Xhtml,当前在让CSS正确显示模型页面方面存在问题。尝试使用页眉、菜单、左/右列和页脚创建两列页面。除了菜单部分外，一切看起来都不错。该页面在internet explorer中显示正确，但在Firefox和Chrome上，它显示的菜单div的开头与ul之间有很大的差距。下面是我的XHTML和CSS HTML: 更新您的Ul样式从到 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN" "http://www.w3.org/TR/xh

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

HTML:

更新您的

Ul

样式从

到

<!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>

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

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

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