Самая сложная ошибка CSS-рендеринга всех времен (IE9)

Взгляните на это в IE9:

сбрасывание экрана:

Прочитайте эти комментарии:

/*
 *  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 */
}

Есть ли у кого-нибудь мнение по этому поводу? Что происходит и как я могу сообщить об этом? Как мне это избежать (я знаю, похоже, я мог просто изменить ЛЮБОЕ из атрибутов выше, но это не так просто...)?

Ответы

Ответ 1

строка имеет отношение к границе родительского контейнера И внутреннего div. Если вы избавитесь от внутреннего div ИЛИ границы, это решит проблему. Я не знаю, поможет ли это, но в чем проблема.

Ответ 2

Я вижу проблему на IE9 Версия: 9.0.4 (KB2618444)

но, похоже, он исправлен Версия: 9.0.24 (KB2909921)