Question

我正在进行一项小任务，页面只能在IE中正确显示。 div background-color都没有显示出来。

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

铬

Chrome

IE

Answer 1

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

不应引用CSS颜色代码。删除引号字符和use a validator。

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

Answer 2

使用

background-color: #003399;

没有“

Answer 3

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

快速修复此问题是将css overflow:hidden添加到父级，这将清除浮动并保留所需的子级高度。

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

Div没有在chrome中显示背景颜色

3 个答案: