0

我现在正在做一个小任务，页面只能在 IE 中正确显示。没有一个div background-colors 出现。

HTML

<body bgcolor="#949191">
  <div id="heading">
    <div id="banner">
      <a href="index.html">
        <img src="images/banner.jpg" alt="Crown Awards" style="border-style: none"/>
      </a>
    </div>
    <div id="nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </div>
  </div>
  <div id="content"></div>
</body>

CSS

#heading{
  height:100px;
  width:900px;
  background-color:"#FFFFFF";
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;            
  display:block;
  box-shadow: 10px 10px 5px #888888;
  margin-bottom:10px;
  position:relative;
}
#banner{
  width:415px;
  float:left;
  padding:20px;
  vertical-align:top;
}
#nav{
  width:400px;
  float:right;
  bottom:0;
  right:0;
  position:relative;
  display:block;
  background-color:"#003399";
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;  
}

#content{
  width:900px;
  background-color:"#FFFFFF";
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;            
  display:block;
  box-shadow: 10px 10px 5px #888888;
}    
ul {
  list-style-type:none;
  margin:0;
  padding:20px;
  vertical-align:bottom;
}
li {
  display:inline;
  float:right;
  padding: 20px 0px 20px 20px;
}
a {
  display:block;
}

铬合金

铬合金

IE

IE

4

3 回答 3

0

默认情况下，浮动元素不会影响其父元素的高度。在父元素上设置overflow: hidden以更改它。

不应引用 CSS 颜色代码。删除引号字符并使用验证器。

由于出现在 Quirks 模式中的许多错误中的两个，因此背景颜色显示在 IE 中。通过使用合适的 Doctype 触发标准模式来避免它们。以<!DOCTYPE html>.

于 2013-04-06T15:56:28.820 回答
0

采用

background-color: #003399;

没有 ”

于 2013-04-06T16:13:27.977 回答
0

如果子元素浮动，则父元素折叠。

对此的快速解决方法是将 css 添加overflow:hidden到父级，这将清除浮动并保留子级的所需高度。

CSS也不应该有background-color引号。

于 2013-04-06T16:13:38.087 回答