internet-explorer - IE后台溢出

Question

我在 IE 中显示 div 的背景溢出时遇到问题(在我的例子中是 9)。 Firefox、Chrome 和 Safari 看起来不错。详情如下:

<div id="wide_line">
  <div id="logo">Nice</div>
  &nbsp;
  <div id="wider_line">&nbsp;</div>
</div>
<div>...Context...</div>

这里的想法是将来自 div#wider_line 的背景放在 Context 下。

#logo{  
  background: #aaaaaa;
  float:left;
  width: 100%;
}

#wide_line{
  background: #bbbbbb;
  float: left;
  width: 100%; 
  height: 7em; // controls height where context starts
}

#wider_line{
  background: #bbbbbb;
  float: left;
  width: 100%;
  height: 11em; // controls width of the overflow of the assigned color
}

如何在 IE 中修复它？

非常感谢!

Answer 1

首先，我认为您应该在 Context div 上有一个 id ...所以我称它为#topper。

<div id="wide_line">
   <div id="logo">Nice</div>
   &nbsp;   
   <div id="wider_line">
       &nbsp;
   </div> 
</div> 
<div id="topper">...Context...</div>

然后我把 CSS 写成这样:

#logo{     background: #aaaaaa;   float:left;   width: 100%; }  
#wide_line{   background: #bbbbbb;   float: left;   width: 100%;    height: 7em; // controls height where context starts }
#wider_line{ position:static; z-index:2;  background: #bbbbbb;   float: left;   width: 100%;overflow:hidden;  height: 11em;}
#topper{
    position:relative;
    z-index:20;
}

我看不到它在 IE 中的外观，因为我在 Ubuntu 上运行，但你可以试试这个，因为它给我的外观与你的代码相同。这是一把 fiddle ，Link