Мне нужна помощь.Пока я работал над проектом в 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>