Most sophisticated CSS rendering bug of all time (IE9)

Question

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

Answer 1

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.