边框半径在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，一切都正常。但这与固定位置的子元素有什么关系呢？它应该始终相对于视口定位。

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

- Evgeny

---

你能更清楚地描述一下期望的行为吗？ - brentonstrine

左侧截图。绿色页脚，宽度为屏幕的100％，高度为100像素。 - Evgeny

确实非常奇怪。将 border-radius:30px 添加到 .footer 中，您会发现只有左上角发生了变化——这是因为某种方式 .root 的边距被反转并且正在剪切带有圆角边距的 .footer。所以这就解释了为什么改变 overflow 会影响它，但我不知道为什么存在 border-radius 会破坏它。 - brentonstrine

Answer 1

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

浏览器供应商似乎已经决定，fixed定位元素的溢出具有关闭剪切的效果，例如，它们不会被其父元素剪切。这使得事情更加一致，因为fixed元素是相对于窗口而不是父元素定位的。如果应用了剪切，则它将具有相对于窗口的位置/宽度和相对于父级的剪切。它会在视觉上看起来像this（除了底部角应该是圆形 - 更多内容请参见下文）。

所以：fixed元素，无溢出剪切。检查。

但是，在IE9中发生了一些变化。他们引入了对圆角的支持。现在说到我关于圆角剪辑的话题。 IE9实际上做得很好。目前许多浏览器即使元素具有圆角也会使用方形剪裁。这很糟糕。显然，IE9通过检测是否存在圆角来解决此问题，并在这种情况下进行重新绘制剪切。当它这样做时，它犯了两个错误。

1. 它应用了剪辑 - 撤销“fixed元素，无溢出剪辑”规则。剪辑被重新打开，并且该元素现在被父元素的宽度所剪辑。

2. 剪辑直接放在元素上，未居中，没有考虑到剪辑应该来自父元素的事实。它只是从0,0开始剪辑到指定的宽度和高度 - 这就是为什么绿色元素出现左对齐 - 右/下侧的50像素被隐藏了。

修复方法？

• 不要将fixed嵌套在absolute内。 （最好的解决方案-避免将来出现奇怪的边缘情况）
• 给父（红色）div一个宽度。
• 直接在.root中嵌套一个新的div，并将overflow:hidden移动到其中。 Fiddle example. （最不具侵入性）

- brentonstrine

Answer 2

遇到了同样的问题：

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

通过将.container的位置设置为-ms-page来修复问题

- whn