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的背景放入。

#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上运行，但你可以试试这个，因为它给我的外观和你的代码一样。这是一个小提琴，Link

IE中的背景溢出

1 个答案: