internet-explorer-9 - Border-radius 在 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 ，一切正常。但是这跟固定位置的 child 到底有什么关系呢？它应该始终相对于视口(viewport)定位。

这是一个已知\记录在案的错误吗？背后的原理是什么？

Answer 1

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

浏览器供应商似乎已经决定关闭溢出的固定位置元素，例如他们没有被他们的 parent 剪掉。这使事情保持一致，因为 fixed 元素是相对于窗口而不是父窗口定位的。如果应用了裁剪，它将具有相对于 window 的位置/宽度和相对于 parent 的裁剪。它在视觉上看起来像this (除了底 Angular 应该是圆的——更多内容见下文)。

所以:fixed 元素，没有溢出裁剪。查看。

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

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

2. 剪裁只是直接放在元素上，未居中，不考虑裁剪是应该来自 parent 。它只是从 0,0 开始剪裁达到指定的宽度和高度——这就是绿色元素的原因显示为左对齐——右侧/底部 50 像素被隐藏。

修复？

• 不要将 fixed 嵌套在 absolute 中。 (最佳解决方案——避免将来出现奇怪的边缘情况)
• 给父(红色)div 一个宽度。
• 直接在 .root 中嵌套一个新的 div 并将 overflow:hidden 移动到它。 Fiddle example. (最少打扰)