DOCTYPE, влияющий на CSS? - PullRequest
Новая
       10

DOCTYPE, влияющий на CSS?

2 голосов
/ 11 июля 2011

Я хочу сделать контейнер фиксированного размера, внутри которого будет изображение (неизвестного размера).Затем я хочу, чтобы изображение соответствовало контейнеру и было центрировано в нем (как по горизонтали, так и по вертикали).Я придумал: 

<!DOCTYPE html>
<html>
  <body>
    <div style="width: 500px; height: 375px; display: table-cell;
                vertical-align: middle">
      <img src="./Slideshow_files/Charles Bridge In Prague.jpg"
           style="max-width: 500px; max-height: 375px">
    </div>
  </body>
</html>

Для некоторых изображений он работает нормально.Однако этот (точного размера 500x375) делает внешнюю высоту div на несколько пикселей выше, чем 375px внизу (5px в Chrome, 4px в Opera).Почему это так?

РЕДАКТИРОВАТЬ: Просто добавил демонстрацию здесь (и еще один с display: table-row и display: table элементами вокруг, здесь ).В обоих случаях красный фон не должен быть виден;в Chrome & Opera это так.

1 Ответ

4 голосов
/ 11 июля 2011

Вы можете решить проблему, установив display: block или vertical-align: top (или bottom) на img.

. Существует три различных режима рендеринга:

  • Режим причуд
  • Режим почти стандартов
  • Режим стандартов

Различные типы документов запускают разные режимы рендеринга.См .: http://hsivonen.iki.fi/doctype/

В стандартном режиме (с запуском типа документа) по умолчанию vertical-align равно baseline.

В режиме причуда (без типа документа) по умолчанию vertical-align is bottom.

Эта страница хорошо объясняет: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

...