Fatal编程技术网
  • internet-explorer/
  • Internet explorer 2个div在Chrome中溢出，但在IE中工作良好

Internet explorer 2个div在Chrome中溢出，但在IE中工作良好

internet-explorer google-chrome html

Internet explorer 2个div在Chrome中溢出，但在IE中工作良好,internet-explorer,google-chrome,html,Internet Explorer,Google Chrome,Html,我正在为一个学校项目制作网页，没什么特别的。我刚刚在IE上完成了我的网站，但当我尝试在Chrome上打开它时，它完全不同，如果有人有想法，我希望得到一些帮助 \uuuuuHTML\uuuuuuu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

我正在为一个学校项目制作网页，没什么特别的。我刚刚在IE上完成了我的网站，但当我尝试在Chrome上打开它时，它完全不同，如果有人有想法，我希望得到一些帮助

\uuuuuHTML\uuuuuuu

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

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
在Chrome中位于我的
contentwrap div
中，我不知道为什么会发生这种情况。有人能帮我吗？

我把你的代码放在Chrome上，玩了一会儿

你可以看到我做了什么

看起来有一个：

float: left;
在您的css规则下

ul#list-nav
我把那件事说了出来

以防万一：如果您希望其中的元素向左浮动，请尝试将规则应用于这些元素。如果希望它与包装重叠，请尝试设置z索引或将包装应用于左浮动

非常感谢，祝你好运

永远不要，永远不要使用IE作为工作方式的参考。充其量也不称职（是目前为止地球上最差的浏览器！）！总是，总是在现代浏览器中测试你的标记：除了IE以外的任何东西。一旦你的标记正常工作，然后看看IE是如何把事情搞砸的。但是IE的众多问题是众所周知的，解决这些问题的黑客也是众所周知的。网络开发人员的口头禅：“如果它在IE中工作，但在其他浏览器中不工作，那么你的标记是错误的！”明白了，为这个建议喝彩。谢谢你的快速回复，非常好的地方，修复得很好。问题解决了，非常感谢：）啊，好的，我知道你是从哪里来的，我会记住这一点，以防我再次陷入困境。谢谢