最复杂的CSS渲染bug(IE9)

前端之家收集整理的这篇文章主要介绍了最复杂的CSS渲染bug(IE9)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
看看这个在IE9:

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

屏幕转储:

阅读这些意见:

  1. /*
  2. * IE9: Upon moving the mouse a ghostly 1px vertical line appears 53px into the
  3. * blue area - only works with normalized CSS (!?) and not inside an iframe
  4. */
  5.  
  6. #test {
  7. width: 152px; /* must be 152px or larger! */
  8. height: 200px; /* can be any height */
  9. border-radius: 1px; /* must be 1px or larger */
  10. background-color: #44f; /* ghost-line becomes invisible with #00f */
  11. }
  12.  
  13. #test:hover {} /* removing this makes the line disappear */
  14.  
  15. #test div {
  16. opacity: 0; /* removing this makes the line disappear */
  17. position: relative; /* removing this makes the line disappear */
  18. left: 53px; /* must be 53px or smaller! */
  19. width: 10px; /* must be 1px or larger */
  20. height: 150px; /* height of the ghost-line */
  21. }

有人对此有任何意见吗?发生了什么事,我该怎么报告?我如何防止这种情况发生(我知道,似乎我可以改变上面的任何属性,但是并不那么容易)

解决方法

该行与父容器AND内部div的边界有关.如果你摆脱了内部的div或边界,它解决了这个问题.我不知道这是否会有帮助,但这似乎是问题.

猜你在找的CSS相关文章