最复杂的CSS渲染bug的所有时间（IE9） [英] Most sophisticated CSS rendering bug of all time (IE9)

问题描述

在IE9中看看这个：

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

屏幕转储：

阅读这些评论：

/ *
* IE9：移动鼠标时，一个鬼的1px垂直线出现53px到
*蓝色区域 - CSS（！？）而不是iframe内
* /

#test {
width：152px; / *必须是152px或更大！ * /
height：200px; / *可以是任何高度* /
border-radius：1px; / *必须是1px或更大* /
background-color：＃44f; / * ghost-line看不见与＃00f * /
}

#test：hover {} / *删除此行使行消失* /

＃ test div {
opacity：0; / *删除这使行消失* /
position：relative; / *删除这使行消失* /
left：53px; / *必须是53px或更小！ * /
width：10px; / *必须是1px或更大* /
height：150px; / *鬼线的高度* /
}


这个？？发生了什么，我如何报告？我怎么保持这种情况发生（我知道，似乎我可以改变任何属性在上面，但它不是那么容易...）？

解决方案

该行与父容器的边框和内部div有关。如果你摆脱内部div或边界，它解决问题。我不知道这是否会有帮助，但这是什么似乎是这个问题。

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...)?

解决方案

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.

这篇关于最复杂的CSS渲染bug的所有时间（IE9）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！