有史以来最复杂的 CSS 渲染错误 (IE9)答案

【问题标题】：Most sophisticated CSS rendering bug of all time (IE9)有史以来最复杂的 CSS 渲染错误 (IE9)
【发布时间】：2011-11-19 11:30:12
【问题描述】：

在 IE9 中看看这个：

http://jsfiddle.net/dalgard/n6PDB/show/

屏幕转储：

阅读这些cmets：

/*
 *  IE9: Upon moving the mouse a ghostly 1px vertical line appears 53px into the
 *  blue area - only works with normalized CSS (!?) and not inside an iframe
 */

#test {
  width: 152px;             /* must be 152px or larger! */
  height: 200px;            /* can be any height */
  border-radius: 1px;       /* must be 1px or larger */
  background-color: #44f;   /* ghost-line becomes invisible with #00f */
}

#test:hover {}              /* removing this makes the line disappear */

#test div {
  opacity: 0;               /* removing this makes the line disappear */
  position: relative;       /* removing this makes the line disappear */
  left: 53px;               /* must be 53px or smaller! */
  width: 10px;              /* must be 1px or larger */
  height: 150px;            /* height of the ghost-line */
}

有人对此有意见吗？发生了什么事，我该如何报告？我该如何防止这种情况发生（我知道，似乎我可以更改上面的任何属性，但这并不容易......）？

【问题讨论】：

或者你可以使用jsfiddle.net/dalgard/n6PDB/show
哦，如果我切换到另一个选项卡然后再改回来，该行就会消失。不过，它会在移动鼠标后重新出现。
（感谢“表演”功能 - 很棒）
yw :) 确实很有用，但是bug，我无法重现。
这条线相当很难看到，因为它是半透明的。将添加屏幕转储。

标签： css rendering internet-explorer-9

【解决方案1】：

这条线与父容器和内部 div 的边框有关。如果您摆脱内部 div 或边框，它可以解决问题。我不知道这是否会有所帮助，但这似乎是问题所在。

【讨论】：

您是否注意到更改任何值（包括将整个内容放在 iframe 中）会使线路消失？是什么让您得出结论？
我将其称为 IE 中的渲染错误，但我注意到如果我在 IE webdev 工具中禁用左边框值，渲染问题就会消失。我还注意到渲染问题似乎在内部 div 位于块中的左边缘触发，并且在鼠标悬停时（不应该做任何事情）渲染线出现。所以我会先解决边界问题，因为如果更改，最不可能被注意到。

【解决方案2】：

我可以在 IE9 上看到问题版本：9.0.4 (KB2618444)

但它似乎是固定的版本：9.0.24 (KB2909921)

【讨论】：