Border-radius 在 IE9、IE10 和 IE11 中导致奇怪的行为答案

【问题标题】：Border-radius causes weird behaviour in IE9, IE10 and IE11Border-radius 在 IE9、IE10 和 IE11 中导致奇怪的行为
【发布时间】：2012-10-20 08:58:17
【问题描述】：

这个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，一切正常。但它到底与固定位置的孩子有什么关系呢？它应该始终相对于视口定位。

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

【问题讨论】：

您能否更清楚地描述预期的行为？
左截图。绿色页脚，宽度为屏幕的 100%，高度为 100px。
确实很奇怪。将border-radius:30px 添加到.footer，您可以看到只有左上角发生了变化——这是因为不知何故.root 的边距被倒置并剪裁.footer（圆角边距！） .这就解释了为什么更改 overflow 会影响它，但我不知道为什么 border-radius 的存在会破坏它。

标签： internet-explorer-9 internet-explorer-10 css internet-explorer-11

【解决方案1】：

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

浏览器供应商似乎已决定 fixed 位置溢出的元素已关闭剪辑，例如他们没有被他们的父母剪掉。这使得事情保持一致，因为fixed 元素是相对于窗口定位的，而不是父级。如果应用了裁剪，它将具有相对于窗口的位置/宽度和相对于父级的裁剪。它在视觉上看起来类似于this（除了底角应该是圆角的——下面会详细介绍）。

所以：fixed 元素，没有溢出剪辑。查看。

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

它应用了剪辑——撤消“fixed 元素，不溢出剪裁”规则。剪裁重新打开，元素现在被父级的宽度裁剪。
剪辑只是直接放在元素上，不居中，不考虑剪辑是应该是来自父母。它只是从 0,0 开始剪辑到指定的宽度和高度——这就是为什么绿色元素显示为左对齐 - 右侧/底部 50 像素被隐藏。

修复？

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

【讨论】：

【解决方案2】：

有同样的问题：

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

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

【讨论】：