Разное отображение блоков с одинаковыми размерами в браузерах.

rikitiki · February 6, 2013

Помогите пожалуйста разобраться с примером в конце 9-го урока на странице:

Там автор приводит пример, что блоки при одинаковых размерах могут в различных браузерах выглядеть по разному.

Пример этот прикладываю:

Я открывал этот пример в браузерах. Действительно в Fiirefox и Opera выглядит иначе чем в IE8.

Но объяснения автора совершенно не улавливаю.

Цитирую дословно: "...Но мы задали ширину у всех блоков одинаковую, почему же тогда в IE блок с id="second" шире первого блока? Да потому, что IE не включает в размер блока поля и отступы. Браузер отобразил 3 и 4 блоки шириной в 300 пикселов, а потом задал им поля и отступы, именно на это количество пикселов наш второй блок и шире первого. А остальные браузеры делают наоборот. ..."

Короче совсем сбил меня с толку. Сначала пишет, что не включает поля, потом что пишет задаёт, а затем добавляет что мол в остальных браузерах всё наоборот.

Пожалуйста, объясните мне, отупевшему от сss, подоходчивей. Перерыл Интернет, но похожего примера не нашёл.

А сам автор урока навряд ли объяснит, так как опубликовал его полгода назад и наверное забыл про него.

mrnobody · February 6, 2013

Почитайте, вам это поможет: http://htmlbook.ru/samlayout/blochnaya-verstka/blochnaya-model

rikitiki · February 7, 2013

Спасибо за ссылку. Изучил страницу, но полного ответа в ней не нашёл. Вроде понятно, что, если не включать !DOCTYPE, то

различия в размерах одного и того же блока в разных браузерах происходят из-за разного применения width. В IE8 он считается по бордеру, а в Opera и FF по контенту.

Если изъять в примере в коде из второго блока внутренние-третий и четвёртый блоки, то и в IE размер второго блока станет равен первому.

Значит внутренние блоки раздвигают по ширине внешний родительский оставаясь внутри него. Но вот объяснения этому я не нашёл.Ведь в Firefox и Opera внутренние блоки вылезают за рамки родительского, оставляя размер родительского неизменным.

Edited February 7, 2013 by rikitiki

Kray Storm · February 7, 2013

Это статья-урок 2012 года? Тогда первый совет - читай лучше htmlbook. Похоже автор той статьи писал ее не для того, чтобы кого-то научить, а чтобы самому разобраться (есть такой подход, да).

По ссылке, приведенной mrnobody все расписано.

Если все еще не понятно, вот несколько моментов:

1. Любой блочный элемент состоит из областей - box-ов. Это content- padding- border- и margin- box-ы.

2. Что определяет величина, задаваемая в параметрах width и height? Ну да. Ширину/высоту области контента.

3. В далекие времена IE5.5 все было не так. Значение width определяло ширину блока по внешней границе рамки, т.е. content+padding+border. Но однажды W3C стало скучно и они все переделали на так, как сейчас (п.2).

И сегодня это имеет прикладной смысл знать, только если ты настойчиво решишь отказаться от использования <doctype>. В этом случае IE, не увидев декларацию, перейдет в режим совместимости (старых сайтов со старыми браузерами), в котором включится модель IE5.5. Либо кто-то из прошлого будет сознательно использовать IE5.5.

Вот и все.

Edited February 7, 2013 by Kray Storm

SelenIT · February 8, 2013

однажды W3C стало скучно и они все переделали

потом им всё-таки стало стыдно, и они решили дать возможность верстальщикам самим выбирать боксовую модель, наиболее подходящую к задаче

rikitiki · February 8, 2013

Спасибо за ответ.

Малость упростил пример. Выкинул все Pading и Margin. Оставил только Width и Height. В коде оставил только два блока- 2-ой родительский и в нём 3-ий внутрениий. Родительский сделал по высоте на 10px больше чем внутренний (чтобы он выглядывал из под внешнего), а внутренний по ширине на 50 px шире родительского. Собственно сам простейший код:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

</div> <div id="second">

<div id="third">Это текст в тегах div с id="third".</div>

</div>

</body>

</html>

и style.css

#second, #third{ border: 1px solid red; }

#second{ background:yellow; width:300px; height:60px; }

#third{ background:pink; width:350px; height:50px; }

Сответственно IE8 опять растянул ширину внешнего блока под размеры внутреннего.

http://img-fotki.yandex.ru/get/5624/24304668.4/0_85c0a_b43b9d9d_orig

В Opere внутренний блок вылез справа наружу.

http://img-fotki.yandex.ru/get/5646/24304668.4/0_85c0b_9f1cfba3_orig

Получается что у IE8 просто такая особенность, растягивать внешний блок под размеры внутреннего содержимого, если оно больше. И неважно что там внутри-div или картинка.

Попытался вылечить это вставив первой строкой: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd">, но ничего не изменилось.

Edited February 8, 2013 by rikitiki

Sign In

Разное отображение блоков с одинаковыми размерами в браузерах.

Question

rikitiki

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

rikitiki

Link to comment

Share on other sites

Kray Storm

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

rikitiki

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information