ie10、border-radius、overflow、位置和隐藏位置：fixed child答案

【问题标题】：ie10, border-radius, overflow, position and hidden position:fixed childie10、border-radius、overflow、位置和隐藏位置：fixed child
【发布时间】：2013-12-11 08:56:06
【问题描述】：

我在 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>

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

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

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

【问题讨论】：

我可以确认这也发生在 IE11 中。而且我猜它不影响IE8的原因是IE8不支持border-radius。
感谢您对 IE11 的提醒。我仍然希望在这里或 MS bugtracker 上得到答案。

标签： internet-explorer-9 css-position internet-explorer-10 css

【解决方案1】：

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

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

这并不理想，但确实可以解决问题。

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

【讨论】：

那肯定行得通。在我们（公司）目前的案例中，我们决定暂时忽略这个问题，因为这个错误只会影响“拥有但不是必需的”功能。如果我们打算解决这个问题，我可能会使用您的解决方案。至于这个错误原因的答案，如果我想出别的东西或从其他任何地方得到任何答案，我会更新这个问题。谢谢。
我希望这个答案高于另一个投票的答案，但与此同时，目前还没有关于原因的真正解释。所以我愿意删除“已接受”状态，但如果有人真的在寻找修复，我就不能这样做。是否有更聪明的方法来“不接受”，同时将其保持在顶部？

【解决方案2】：

似乎是一个常见问题：

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

语义 HTML 爱好者会感到恐惧，但恐怕没有似乎是一个纯 CSS 的修复……除非有人知道？

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

【讨论】：

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

【解决方案3】：

所以这只是一个想法，我无法对其进行测试，因为我使用的是 Mac，目前手头没有 Windows 机器。但是您是否尝试过在固定元素上使用clearfix？这将导致浏览器以不同的方式处理元素并在其后显示其他内容。如果运气好的话，它可能会出现？

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

【讨论】：

Clearfix 通常用于解决浮动问题，所以我并没有真正期待 clearfix 能够工作。我只是为了尝试而尝试了它（'也烧了一些蜡烛；伏都教有时可以与 IE 一起使用）并且......它没有用。 :)