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>

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

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

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

Answer 1

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

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

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

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

Answer 2

似乎是一个常见问题：

  

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

     

语义HTML奉献者会感到恐惧，但我担心没有   似乎只是一个CSS修复...除非有人知道否则？

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

Answer 3

所以这只是一个想法而我无法测试它因为我在Mac上并且现在没有手持Windows机器。 但是你试过在固定元素上使用clearfix吗？这将导致浏览器以不同方式处理元素并在其后显示其他内容。运气好的话可能会出现吗？

它可能不起作用，但有时会发生奇怪的事情。