Question

我正在为一个学校项目的网页工作，没什么特别的。我刚刚在IE中完成了我的网站，但是当我尝试在Chrome中打开它时，它完全不同，如果有人有想法，我会很乐意帮助。

__ HTML ____

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head>
    <title>The Corner Shop</title>
    <link rel="stylesheet" type="text/css" href="realstyle.css" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   </head>
  <body>
    <div id="menu1">
      <ul id="list-nav">
        <li>HOME</li>
        <li><a href="About us.html">ABOUT US</a></li>
        <li><a href="Menu.html">THE MENU</a></li>
        <li><a href="Gallery.html">THE GALLERY</a></li>
        <li><a href="Contact details.html">CONTACT US</a></li>
      </ul>
    </div> <!-- menu1 -->
    <div id="contentwrap">
      <div id="heading">
        <a href="index.html">
          <img border="0" src="GalleryI/Logo.jpg" width="170" height="150" alt="Logo" />
        </a>
      </div> <!-- heading -->
      <div id="content">
        <br />
        <br />
        <p id="texttitle">"The best burger joint around."</p>
        <p>Prepared and served with a passion.</p>
        <p id="textstuff">Using the freshest and best Australian ingredients, just for you.</p>
        <br />
        <br />
        <br />
        <p> This weeks special:</p>
        <br />
        <br />
        <img border= "5" src="GalleryI/beefburger.jpg" alt="Beef Burger Supreme" height="250" width="250" />
        <p>The Beef Burger Supreme $5.50</p>
      </div> <!-- content -->
    </div> <!-- contentwrap -->
  </body>
</html>

__ CSS ____

body {
  background-image: url("GalleryI/Background3.jpg");
  margin:0;
  padding:0;
}

a:link {
  color: White;
  text-decoration: none;
}

a:visited {
  color: White;
  text-decoration: none;
}

ul#list-nav {
  margin:0;
  margin-top: 0px;
  padding:0;
  list-style:none;
  font-family: Impact, Arial, sans-serif;
  text-transform:uppercase !important;
  font-size: 20px;
  float:left;
  /* text-decoration: bold; */
  white-space: nowrap;
}

ul#list-nav li {
  display:inline;
  color:white;
  position: relative;
  letter-spacing:2px;
  line-height:35px;
  /* margin:right; */
  color:#CD2626;
  padding: 25px 25px 0px 30px;
}

ul#list-nav li a {
  text-decoration:none;
  color:#ffffff;
  /* float:left; */
}

ul#list-nav li a {
  text-align:center;
}

ul#list-nav li a:hover {
  color:#CD2626;
}

#menu1 ul {
  text-align:center;
  width:100%;
  background:#000000;
}

#heading {
  height: 150px;
  width: 780px;
  background-image: url("GalleryI/fast-food-burger1.jpg");
  color: white;
  padding:5px 5px 5px 5px;
  text-align:left;
  margin:0 auto; 
  border: #000 5px solid;
}

#content {
  width: 800px;
  height: 650px;
  background-color: #090909;
  color: white;
  border-top: #000 5px solid;
  border-bottom: #000 5px solid;
  font-size: 18px;
  text-align:center;
  font-family: arial,sans-serif;
  color: #CCC;
  margin:0 auto;
  margin-top: 10px;
}

#contentmenu {
  width: 800px;
  height: 850px;
  background-color: #090909;
  color: white;
  border-top: #000 5px solid;
  border-bottom: #000 5px solid;
  font-size: 18px;
  text-align:center;
  font-family: arial,sans-serif;
  color: #CCC;
  padding:20px 0px 5px 0px;
  margin-top: 10px;
}

#contentwrap {
  text-align:center;
  width:100%;
  opacity:0.9;
  filter:alpha(opacity=90);
  background-color: red;
  margin-top: 0px;
  padding: 10px;
}

#texttitle {
  font-size: 24px;
  color: #CCCCCC;
  font-family: arial,sans-serif;
  font: italic bold;
}

#textstuff {
  font: arial,sans-serif;
  font-size: 18px;
}

#aboutuscontent {
  font: arial,sans-serif;
  font-size: 17px;
  padding: 10px 50px 50px 50px;
  text-align: left;
  margin: 40px;
}

#thing {
  color: red;
  font-size: 24px;
}

#thing2 {
  color: red;
  font-size: 24px;
}

#menutable {
  width: 700px;
  color: white;
  font-family: arial,sans-serif;
}

其中一些没有意义，因为它影响了我没有链接的其他页面，但基本上就是这样，这在IE中运行良好，但menu1 div在我的contentwrap div内Chrome，我不知道为什么会这样。任何人都可以帮助我吗？

Answer 1

我把你的代码带到了Chrome中并且稍微玩了一下。

你可以看到我做了什么here

看起来有一个：

float: left;

在你的css规则下

ul#list-nav

我评论说出来了。

以防万一：如果你希望里面的元素它向左浮动，请尝试将规则应用于那些。如果您希望它与包装器重叠，请尝试设置z-index或应用包装器向左浮动。

非常感谢，祝你好运！

Chrome中有2个div溢出但在IE中运行正常

1 个答案: