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

Question

我偶然发现IE10和IE9的奇怪之处,不影响IE8:当设置其父级的border-radius,overflow和position时,隐藏"position:fixed"子元素(参见jsfiddle示例).如果禁用其中一个属性,则会显示固定元素.

我在http://jsfiddle.net/arkhi/7Nydz/上放了一个实例.

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

2. 理想情况下,所有红色框应显示在页面的右下角,从右到左.
3. 在IE9和IE10上,第一个框被隐藏.
4. 如果有人选择"全选",然后单击页面上的某个位置,则会出现第一个框.

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

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

Answer 1

似乎是一个常见问题：

\n\n

\n

<div></div>幸运的是，有一个快速但肮脏的解决方案：只需在绝对定位元素之前和/或之后放置一个空的未定位静态即可。在固定示例中，空\n <div></div>可防止问题发生。

\n\n

语义 HTML 爱好者会感到震惊，但我担心 \xe2\x80\x99m 担心 \xe2\x80\x99t\n 似乎只是 CSS 修复 \xe2\x80\xa6 除非有人知道否则？

\n

\n\n

http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/

\n