0

私は現在、小さな課題に取り組んでおり、ページは 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;
}

クロム

クロム

IE

IE

4

3 に答える 3

0

デフォルトでは、浮動要素は親要素の高さに影響を与えません。overflow: hiddenそれを変更するには、親要素に設定します。

CSS カラー コードは引用しないでください。引用符を削除し、バリデーターを使用してください。

Quirks モードで発生する多くのバグのうちの 2 つが原因で、背景色が IE に表示されます。適切な Doctype で標準モードをトリガーすることにより、それらを回避します。で HTML を開始します<!DOCTYPE html>。

于 2013-04-06T15:56:28.820 に答える
0

使用する

background-color: #003399;

それなし "

于 2013-04-06T16:13:27.977 に答える
0

子要素がフローティングの場合、親要素は折りたたまれます。

これを簡単に修正するには、cssoverflow:hiddenを親に追加します。これにより、フロートがクリアされ、子の希望の高さが保持されます。

また、background-colorcss には引用符を含めないでください。

于 2013-04-06T16:13:38.087 に答える