边界半径导致IE9，IE10和IE11的奇怪行为 [英] Border-radius causes weird behaviour in IE9, IE10 and IE11

问题描述

此（除了底角应该是四舍五入 - 更多的下面）。

因此：固定元素，没有溢出剪辑。检查。

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

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




2. 剪辑只是直接放在元素上，
   不居中，不考虑剪辑是
   应该是从父母。它从0,0
   开始到指定的宽度和高度 - 这就是为什么绿色元素
   出现左对齐 - 右/底50px被隐藏。

修复？

• c $ c> fixed 里面 absolute 。 （最佳解决方案 - 避免将来出现奇怪的边缘情况）


• 给父（红色）div一个宽度。


• code>直接在 .root 中，将 overflow：hidden 它。 小提示示例（最低侵入）

This Fiddle produces expected results in real browsers (I tried FF, GC, Safari), but breaks unexpectedly in IE9, IE10 and IE11. No problems with IE7 or 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;
}

If I remove border-radius or overflow:hidden from parent, everything works fine. But what on Earth does it have to do with fixed position child? It is supposed to be always positioned relatively to viewport.

Is it a known\documented bug? What is the rationale behind it?

解决方案

Here is what I think is happening.

Browser vendors seem to have decided that fixed position elements that overflow have clipping turned off, e.g. they are not clipped by their parents. This makes things consistent, since fixed elements are positioned relative to the window, not the parent. If clipping was applied, it would have position/width relative to the window and clipping relative to the parent. It would visually look like this (except the bottom corners should be rounded--more on that below).

So: fixed element, no overflow clipping. Check.

But something changed in IE9. They introduced support for rounded corners. Now to what I said about the rounded clipping. IE9 actually did this right. Many browsers right now will clip with square corners, even when the element has rounded corners. This is bad. Apparently, IE9 fixed this by detecting the presence of rounded corners, and in such cases, re-drawing the clipping. When it does that, it makes two mistakes.

1. It applies the clipping--undoing the "fixed element, no overflow clipping" rule. Clipping is turned back on, and the element is now clipped by the width of the parent.

2. The clipping is just put directly on the element, un-centered, with no regards to the fact that the clipping is supposed to be from the parent. It's just clipped starting at 0,0 out to the designated width and height--that's why the green element appears left aligned--the right/bottom 50px are hidden.

Fixes?

• Don't nest fixed inside absolute. (Best solution--avoid weird edge-cases in the future)
• Give the parent (red) div a width.
• Nest a new div directly inside .root and move the overflow:hidden to it. Fiddle example. (Least intrusive)

这篇关于边界半径导致IE9，IE10和IE11的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！