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

时间:2013-11-26 09:39:02

标签: internet-explorer-9 css-position internet-explorer-10 css3 css

我偶然发现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. 如果选择“全选”,然后单击页面上的某个位置,则会出现第一个框。
  4. 我想知道是否有人有任何解释或链接解释此错误(如果这是一个错误,而不是我没有看到明显的错误)。

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

3 个答案:

答案 0 :(得分:2)

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

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

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

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

答案 1 :(得分:1)

似乎是一个常见问题:

  

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

     

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

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

答案 2 :(得分:0)

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

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