有史以来最复杂的 CSS 渲染错误 (IE9)
在 IE9 中查看:
http://jsfiddle.net/dalgard/n6PDB/show/
屏幕转储:
阅读这些评论:
/*
* 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 */
}
有人对此有任何意见吗?发生了什么事?我该如何报告?我如何防止这种情况发生(我知道,似乎我可以更改上面的任何属性,但这并不那么容易......)?
Take a look at this in IE9:
http://jsfiddle.net/dalgard/n6PDB/show/
screen dump:
Read these comments:
/*
* 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 */
}
Does anyone have any opinion on this?? What is going on and how can I report this? How do I keep this from happening (I know, it seems I could just change ANY of the attributes in the above, however it's not so easy...)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
该线与父容器和内部 div 的边框有关。如果去掉内部 div 或边框,问题就可以解决。我不知道这是否有帮助,但这似乎就是问题所在。
the line has to do with the border of the parent container AND the inner div. If you get rid of the inner div OR the border it resolves the issue. I don't know if this will help but that's what appears to be the problem.
我可以在 IE9 上看到这个问题
版本:9.0.4(KB2618444)
但似乎已修复
版本:9.0.24 (KB2909921)
I can see the issue on IE9
Version: 9.0.4 (KB2618444)
but it seems to be fixed on
Version: 9.0.24 (KB2909921)