Почему IE не отображает это запрошенное фоновое изображение?

Question

Вот странная разница рендеринга между IE и другими браузерами.

Internet Explorer 8

Firefox 3.5

Chrome 5

Видите разницу? Эта вертикальная линия внезапно останавливается в IE8. Это потому, что IE8 отказывается отображать определенное фоновое изображение. Вот соответствующий фрагмент кода CSS:

td#leftbar {
    background: url(img/leftbar.gif) repeat-y right top;
    width: 100px;
}

Вы можете получить дополнительную информацию, просмотрев веб-сайт на своем компьютере здесь: http://labs.pieterdedecker.be/vspwpg/

Answer 1

Проблема не в leftbar: это leftbartop ячейка таблицы, растягивающаяся до самого дна. Это потому, что leftbartop находится в той же строке таблицы, что и содержимое.

На самом деле, я думаю, что IE - единственный браузер, который делает это правильно: все элементы в tr переводятся на одинаковую высоту. IE почему-то игнорирует свойства rowspan столбцов , Почему я не знаю.

Первое, что приходит на ум с точки зрения решения - если кто-то не придет с объяснением этого поведения - это иметь отдельную таблицу с левой (первой) (leftbartop) и третьей строками ( leftbarbottom) с фиксированной высотой.

О, и использование таблиц для разметки больше не является социально приемлемым. Просто в качестве примечания :)

Answer 2

Я буду вторым Комментарий Пекки о том, как избегать таблиц для макетов, но поскольку предложение серьезных структурных изменений было бы немного экстремальным, следующий CSS кажется достаточно хорошим для решения проблемы:

TABLE#body {
  background:url(img/leftbar.gif) repeat-y 94px top;
  border-collapse:collapse;
  width:100%;
}

TD#leftbar {
  width:100px;
}

TD#leftbarbottom {
  background:#FFFFFF url(img/leftbarbottom.gif) no-repeat right top;
  height:100px;
}

Что касается различия между IE и Firefox / Chrome, единственной потенциально важной информацией, которую я смог найти прямо сейчас, был раздел CSS 2.1 о высоте таблицы , в котором говорится:

CSS 2.1 не определяет, как ячейки которые охватывают более одного ряда, влияют на ряд расчеты высоты за исключением того, что сумма задействованных высот строки должна быть достаточно великим, чтобы охватить клетку охватывая строки.

Таким образом, поведение IE не только странно, но и нет четкого объяснения того, что должно произойти . В случае IE пространство, требуемое для многорядных ячеек, кажется, разделено, используя некоторый относительный процент, относящийся к минимальной высоте каждой включенной строки.

Чтобы проиллюстрировать это, вы можете заставить #leftbar занять все пространство, которое он сейчас оставляет пустым, используя следующие правила:

TD#leftbartop {
  height:1px;
}

TD#leftbar {
  height:150px;
}

Другим интересным примером является разделение 1/3, 2/3:

TD#leftbartop {
  height:33px;
}

TD#leftbar {
  height:66px;
}

Обратите внимание, что если вы установите height на что-то неоправданно маленькое (например, 1px в предыдущем примере), он вычисляет высоту для этой ячейки, которая основана не на относительном проценте, а на чем-то другом. Я не уверен, откуда это исходит прямо сейчас, но я поиграюсь с числами и посмотрю, смогу ли я сделать это позже.