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

Question

这个小提琴在真实的浏览器中产生预期的结果(我试过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元素相对于窗口而不是父窗口定位.如果应用了裁剪,它将具有相对于窗口的位置/宽度以及相对于父级的裁剪.它在视觉上看起来像这样(除了底角应该是圆形的 - 更多在下面).

所以:fixed元素,没有溢出剪辑.校验.

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

1. 它应用剪辑 - 撤消" fixed元素,无溢出剪切"规则.重新打开剪切,现在按父项的宽度剪切元素.

2. 裁剪直接放在元素上,无中心,而不考虑裁剪应该来自父级的事实.它只是从0,0开始剪切到指定的宽度和高度 - 这就是为什么绿色元素看起来左对齐 - 右/底50px被隐藏.

修复？

• 不要fixed在里面筑巢absolute.(最佳解决方案 - 避免将来出现奇怪的边缘情况)
• 给父(红色)div一个宽度.
• div直接嵌入一​​个新的.root并移动overflow:hidden到它.小提琴的例子.(最少侵入性)