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

发布于 2024-12-10 18:22:54 字数 2318 浏览 0 评论 0原文

目前在让 CSS 正确显示模型页面方面存在问题。尝试制作一个两栏页面，其中包含标题、菜单、左/右栏，然后是页脚。除了菜单部分之外，一切看起来都不错。该页面在 Internet Explorer 中显示正确，但在 Firefox 和 Chrome 上显示菜单 div 的开头与 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;
}

原文

Currently having an issue with getting the CSS to display a mockup page correctly. Attempted to do a two column page with a header, menu, left/right column and then the footer. Everything looks good except for the menu portion. The page displays correctly in internet explorer, but it shows a large gap between the start of the menu div and the ul on Firefox and Chrome. Below are my XHTML and 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;
}

分享到QQ

分享到微博