HTML-элементы с разной высотой в разных браузерах

Question

Я немного дурачусь с HTML и CSS и столкнулся с проблемой, которую не могу решить.Вот ссылка и изображение проблемы:

! [Введите описание изображения здесь] [1]

Верхняя часть - Firefox, которая отображает его так, как я хочу.

Ниже Chrome (IE показывает его как Chrome).Как вы можете видеть, желтой высоты недостаточно для изображения.

Вот код:

<section id="top-content">
<div id="top-content-upper">
<h2>Welcome to our Site</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
<a href="#">Learn More</a>
<a href="#">Our Work</a>
</div>

<img src="dragon.jpg" alt="dragon" id="featured1">
<img src="underconstrcution.jpg" alt="under construction" id="featured2">

<div id="breadcrumbs">Youre here: Home > Welcome</div>

</section>

и CSS:

#top-content
{
background: green;
padding: 20px 10px;
position: relative;

}
#top-content-upper
{
background: yellow;
padding: 15px 50% 15px 10px;
}
#top-content-upper h2
{
margin-bottom: 15px;
}
#breadcrumbs
{
background: red;
padding: 5px 0 5px 15px
}
#featured1
{
position: absolute;
top: 40px;
left: 600px;
z-index:2;
}
#featured2
{
position: absolute;
top: 80px;
left: 640px;
z-index:1;
}

Спасибомного для всех ответов.Сейчас я решил это с помощью min-height.Я собираюсь попробовать плавать, хотя.И спасибо за ссылку на статью о размере коробки

Answer 1

Браузеры не должны отображать такие вещи, как текст. Могут быть небольшие различия в размере текста, интервале и потоке, которые могут повлиять на то, сколько вертикального пространства занимает текст.

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

Если вы хотите, чтобы они плавали поверх всего остального, это нормально, но вы, вероятно, захотите избежать абсолютного позиционирования в зависимости от вашего варианта использования и использовать что-то вроде float: right.

Другим ответом было использование минимальной высоты. Это прекрасное решение, но оно не меняет того факта, что блоки имеют совершенно разные схемы позиционирования.

Answer 2

Атрибут css box-sizing был создан для решения этой конкретной проблемы. Все три основных браузера рассчитывают высоту по-разному. Используя box-sizing, вы можете получить немного большей согласованности, а затем установить высоту желтого поля, чтобы разместить оба изображения.

Узнайте больше о размерах коробки здесь: http://css -tricks.com / box-size /

P.S. Я бы рекомендовал использовать модернизатор (http://www.modernizr.com)), чтобы помочь устаревшим браузерам, таким как IE7, с новыми функциями HTML / CSS, такими как box-sizing

Answer 3

У меня была похожая проблема, с которой я решил

 min-height: (height)px;