#html #css #cross-browser
#HTML #css #кроссбраузерный
Вопрос:
Мне нужна некоторая помощь. Работая над проектом в Chrome, я хотел протестировать его в Firefox и был озадачен тем, почему он выглядит так по-другому.
Кто-нибудь может мне объяснить, почему зеленый div, содержащий изображение, не регулирует свою ширину относительно дочернего элемента? Это ошибка? Это особенность? Это ошибка?
Исследования
Это работает, как я и ожидал в Chrome, где это выглядит следующим образом:
Но в Firefox много странных пробелов (это то же изображение, что и первое):
Кроме того, вот скриншот следующих браузеров (начиная слева) Firefox, Opera и Internet Explorer 11:
Как вы можете видеть, это работает так, как я ожидаю в Opera, но не в FF и IE11. Это также не работает в Edge.
Мои выводы
Мне кажется, что Firefox забывает пересчитать ширину родительского элемента после изменения размера изображения.
Вот скриншот без ограничений по высоте (100% от родительской высоты 200 пикселей):
Если я перечитаю ограничение высоты, это будет выглядеть следующим образом:
Как вы можете видеть, ширина такая же. Обратите внимание, что ширина зеленого div-файла составляет 510 пикселей. Это то же самое, что изображение (500 пикселей) отступ (5 пикселей 5 пикселей).
Код
Я попытался добавить jsFiddle для вашего удобства, но, что любопытно, я не смог воспроизвести ошибку там (она работала так, как и предполагалось).
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.wrapper {
height: 200px;
}
.div1 {
float: left;
background-color: green;
}
.div1 img {
height: 100%;
padding: 5px;
}
.div2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
<img src="http://placehold.it/500x500">
</div>
<div class="div2">
<h1>Heading</h1>
</div>
</div>
</body>
</html>
Ответ №1:
Я отвечу на свой собственный вопрос в надежде помочь кому-то еще
TLDR:
Мне не хватало объявления doctype HTML5, которое выглядит следующим образом: <!DOCTYPE html> .
Более длинная версия:
При написании этого вопроса мне внезапно пришло в голову, что это может быть вызвано отсутствием объявления doctype. Быстрый тест подтвердил мои подозрения. Все, чего мне не хватало, это <!DOCTYPE html> объявления!
Можно с уверенностью сказать, что я обновлю свой фрагмент, чтобы включить doctype. Я использовал doc фрагмент Visual Studio и больше никогда об этом не думал. Обратите внимание, что html фрагмент уже содержит doctype. (В VS: если вы наберете html или doc и нажмете tab в HTML-документе, появится быстрый HTML-шаблон)
Почему
Без объявления doctype браузер отображает страницу как можно лучше в так называемом режиме quirks. В режиме quirks браузер должен угадать, как должна выглядеть страница, уделяя основное внимание обратной совместимости. Поэтому результат, естественно, отличается от более новых спецификаций.
Doctypes был изобретен, чтобы отличать устаревшие сайты от сайтов, использующих более новые спецификации, еще тогда, когда существовали IE и Netscape. Вы можете прочитать больше об этом в MDN здесь:
Приятно знать:
Убедитесь, что вы разместили DOCTYPE прямо в начале вашего HTML-документа. Все, что находится перед DOCTYPE, например комментарий или XML-объявление, запускает режим quirks в Internet Explorer 9 и старше.
-MDN
В HTML5 единственное назначение DOCTYPE — активировать режим полных стандартов.
-MDN
Как узнать, какой режим используется
В Windows нажмите alt , чтобы вызвать старую добрую панель инструментов, затем перейдите к Tools ➡ Page info
