边界半径在IE9，IE10和IE11中引起奇怪的行为

Question

这个Fiddle在真正的浏览器中产生了预期的结果（我试过FF，GC，Safari），但在IE9，IE10和IE11中出乎意料地中断了。 IE7或IE8没有问题。

<div class="root">
    Top
    <div class="footer">Bottom</div>
</div>

.root {
    background-color: red;
    position: absolute;
    height: auto;
    bottom: 0; top: 0; left: 0; right: 0;
    margin: 25px;
    border: 0;
    border-radius: 7px;
    overflow: hidden;
}

.footer {
    background-color: green;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
}

如果我从父母移除border-radius或overflow:hidden，一切正常。但它与地球上的孩子有什么关系呢？它应该始终相对于视口定位。

这是一个已知的\记录的错误？它背后的理由是什么？

Answer 1

这是我认为正在发生的事情。

浏览器供应商似乎已经确定溢出的fixed位置元素已关闭，例如他们被父母 剪裁。这使事情保持一致，因为fixed元素相对于窗口而不是父窗口定位。如果应用裁剪，它将具有相对于窗口的位置/宽度以及相对于父级的裁剪。 在视觉上看起来像<{3}} （除了底角应该是圆形的 - 更多的是在下面）。

所以：fixed元素，没有溢出剪辑。校验。

但是在IE9中有些变化。他们引入了对圆角的支持。现在我谈到圆形剪裁。 IE9实际上做得对。现在许多浏览器都会剪切方角，即使元素有圆角也是如此。这是不好的。显然，IE9通过检测圆角的存在来解决这个问题，在这种情况下，重新绘制剪辑。当它这样做时，它会犯两个错误。

1. 它应用剪辑 - 撤消“fixed元素，不 溢出剪辑“规则。重新打开剪切和元素 现在被父级的宽度剪裁。

2. 裁剪直接放在元素上， 没有中心，没有关于裁剪的事实 应该来自父母。它只是从0,0开始剪辑 到指定的宽度和高度 - 这就是绿色元素的原因 左对齐显示 - 右/底50px隐藏。

修复

• 不要在fixed内嵌套absolute。 （最佳解决方案 - 避免将来出现奇怪的边缘情况）
• 给父（红色）div一个宽度。
• 将div直接嵌入.root内，并将overflow:hidden移至{{1}}。 this（最少侵入性）

Answer 2

有同样的问题：

<div class="relative-parent-with-border-radius">
  ...
  <div class="container">
    <div class="fixed-child">...</div>
  </div>
  ...
</div>

通过将.container位置设为-ms-page

来解决问题