internet-explorer-9 - ie10, border-radius, overflow, position 和 hidden position :fixed child

Question

我在 IE10 和 IE9 中偶然发现了一些奇怪的东西，但不影响 IE8:当设置了其父元素的边界半径、溢出和位置时，“位置:固定”子元素被隐藏(参见 jsfiddle 示例)。 如果其中一个属性被禁用，固定元素就会出现。

我在 http://jsfiddle.net/arkhi/7Nydz/ 放了一个活生生的例子.

<div style="position:relative; border-radius:5px; overflow:hidden;">
    <a style="position:fixed">fixed child</a>
</div>

1. 理想情况下，所有红色框都应显示在页面右下角，从右到左。
2. 在 IE9 和 IE10 上，第一个框是隐藏的。
3. 如果执行“全选”然后单击页面上的某处，则会出现第一个框。

我想知道是否有人有解释这个错误的任何解释或链接(如果这是一个错误，而不是我没有看到明显的)。

非常感谢对此的任何反馈!

Answer 1

在没有其他人提供有用答案的情况下，我设法解决此问题的唯一方法是添加一个额外的嵌套元素，并将三个受影响的样式拆分为两层。

<div>      //style with position:fixed
  <div>    //style with overflow:hidden and border-radius
    ....
  </div>
</div>

这并不理想，但它确实解决了这个问题。

为了证明它有效，这是你的 jsFiddle 对 test-1 所做的更改:http://jsfiddle.net/7Nydz/2/