IE10、边框半径、溢出、定位和隐藏位置: 固定定位的子元素

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. 如果用户全选然后在页面任意位置点击，第一个框将会出现。

我想知道是否有人能够解释这个bug或者提供相关链接（如果这是一个bug而不是我看漏了什么明显的东西）。

感谢您对此的任何反馈！

- arkhi

---

我可以确认这个问题在IE11中也存在。我猜测它不影响IE8的原因是IE8不支持border-radius。 - Spudley

感谢您提醒IE11的问题。我仍然希望在这里或MS bugtracker上得到答案。 - arkhi

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/

- Spudley

---

那肯定会起作用。在我们（公司）目前的情况下，我们决定暂时忽略这个问题，因为这个 bug 只影响了一个“好玩但不必要”的功能。如果我们计划解决这个问题，我可能会使用你的解决方案。至于这个 bug 的原因，如果我有其他想法或从其他地方得到任何答案，我会更新这个问题。谢谢。 - arkhi

我希望这个答案能够排在其他赞同的答案之上，但同时，目前还没有真正的解释。因此，我愿意取消“已接受”的状态，但如果有人正在寻找解决方法，我无法真正做到这一点。是否有更聪明的方法可以在保持置顶的同时“取消接受”？ - arkhi

Answer 2

似乎这是一个常见的问题:

幸运的是，有一个快速而不太正式的解决方案：在绝对定位的元素之前和/或之后立即放置一个空的未定位静态

。在固定示例中，标题后面的空

可以防止出现问题。

语义HTML爱好者会感到恐慌，但恐怕没有CSS-only的解决方法...除非有人知道其他方法？

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

- David d C e Freitas

---

我认为这不是同一个错误，并且按照描述添加一个空的div并不会改变OP的jsfiddle代码中的任何内容。 - Spudley

Answer 3

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

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

- greenish

---

Clearfix通常用于解决浮动问题，所以我并没有真正期望clearfix能够起作用。不过，出于尝试的目的，我还是试了一下（也烧了些蜡烛；有时候IE上的巫术会奏效），结果...它没起作用。 :) - arkhi