html - IE 10-尽管有父级位置，div也被下推:相对

我遇到了IE 10的浏览器兼容性问题。为了补偿在早期版本的ie中将该div向下推的负上边距，我将父div相对放置了，但是此修复在ie10中似乎不起作用。这是我的代码：

<div class="hidden-panel">
<div class="gradient-wrap">
    <div class="calls">
      <table>
        <tr>
          <td>
            <a href="/"><img src="bully-call1.png"></a>
          </td>
          <td>
            <a href="/"><img src="bully-call2.png"></a>
          </td>
          <td>
            <a href="/"><img src="bully-call3.png"></a>
          </td>
        </tr>
      </table>
    </div>
    <div class="blue-window">
      <img src="take-pledge.png">
    </div>
</div>
</div>

和CSS：

.gradient-wrap{
    padding-top: 80px;
    padding-left: 25px;
    padding-bottom: 100px;
    background: url(gradientbg.png) repeat-x;
    margin-top: -100px;
    position: relative;
}

.calls{
  width: 60%;
  }

.hidden-panel{
    background-image: url(hidden-panel.png);
    background-position: center top;
    background-repeat: no-repeat;
  }

.blue-window{
  background-color: $theme_color_6;
  padding: 45px 180px 45px 0px;
  width: 180px;
  margin: 100px auto 30px;
  }

这是网站：http://www.thebullyproject.com/home2

最佳答案

我现在还不确定100％为什么这样做，但是看起来内容在IE10中被下推了，因为左侧的填充物没有足够的空间容纳它。

如果在padding-left上将22px更改为.gradient-wrap，它将按预期方式工作（填充较少）。

关于html - IE 10-尽管有父级位置，div也被下推:相对，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15117168/