в попсовых браузерах margin-top криво работает

@eternity · Регистрация: 23.11.2012

Студворк — интернет-сервис помощи студентам

решил вспомнить, что такое css и нашел такой баг в попсовых браузерах. Работает корректно только в ie и в старых версиях остальных браузерах

баг в том, что у первого внутреннего дива margin-top сдвигает вниз родительский элемент, так что будьте внимательны

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<body>
 
<div style="width: 350px; height: 350px; background-color: blue;">
 
  <div style="background-color:yellow; width:50px; height:50px; margin-top: 50px;"></div>
  <div style="background-color:red; width:50px; height:50px; margin-top: 50px;"></div>
  <div style="background-color:green; width:50px; height:50px;margin-top: 50px;"></div>
 
 
</div>
</body>
</html>

@Зверушь · 27.11.2012, 21:41

Есть такое. Сомневаюсь, что это баг. Как инкак во всех современных браузерах такое происходит. Так что вполне вероятно, что это описано в спецификации, я не вникал.
Я использую padding-top

Если в дифе фон то задаю background-position равный padding-top

Если див надо обернуть в рамку, что ж, вставляю перед ним фиктивный див нужной высоты

@Taatshi · 27.11.2012, 22:00

Это не баг. Это нормальное поведение дивов в потоке.

@Зверушь · 27.11.2012, 22:27

Taatshi, можно поподробнее, пожалуйста? Очень интересно, почему так происходит.

@eternity · 27.11.2012, 23:27 **[ТС]**

Сообщение от Taatshi

Это не баг. Это нормальное поведение дивов в потоке.

т.е. по вашему мнению, ie и другие версии браузеров более старые, а не новые, работали всегда криво обрабатывая это свойство, и только сейчас стали нормально работать?

да и в спецификации наверное забыли написать о том, что margin-top не будет работать если он задан в первом дочернем элементе?

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

@Taatshi · 27.11.2012, 23:53

Зверушь, http://softwaremaniacs.org/blo... yout-flow/

@eternity · 28.11.2012, 00:11 **[ТС]**

Сообщение от Taatshi

Зверушь, http://softwaremaniacs.org/blo... yout-flow/

ну да там так и написано: "Раз уж зашла речь о выравнивании, скажу и о вертикальном. Это одна из тех немногих вещей, с которой в CSS совсем плохо. Говоря по-простому, какого-то одного вменяемого механизма, да еще и работающего в большинстве браузеров, просто не существует. Существуют способы обходить этот недостаток, причем нет ни одного универсального - все с каким-то условиями."

а вы говорите: "Это не баг. Это нормальное поведение дивов в потоке."

Vovan-VE · 28.11.2012, 15:44

eternity, Так и было задумано. Называется «Объединение полей» («Collapsing margins»). http://www.w3.org/TR/CSS21/box... ng-margins
Как раз-таки в IE, как всегда, все неправильно. Добавьте правильный !doctype - станет правильнее.

Добавлено через 1 минуту

Сообщение от eternity

Говоря по-простому, какого-то одного вменяемого механизма, да еще и работающего в большинстве браузеров, просто не существует.

7 лет назад. Вы бы еще 1998 год откопали.

@eternity · 28.11.2012, 21:48 **[ТС]**

Сообщение от Vovan-VE

eternity, Так и было задумано. Называется «Объединение полей» («Collapsing margins»). http://www.w3.org/TR/CSS21/box... ng-margins

отстал я от прогресса, спасибо из информацию

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита табличной части. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Зверушь 461 / 369 / 94 Регистрация: 01.05.2010 Сообщений: 1,761
	27.11.2012, 21:41
	Есть такое. Сомневаюсь, что это баг. Как инкак во всех современных браузерах такое происходит. Так что вполне вероятно, что это описано в спецификации, я не вникал. Я использую padding-top Если в дифе фон то задаю background-position равный padding-top Если див надо обернуть в рамку, что ж, вставляю перед ним фиктивный див нужной высоты 1

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	27.11.2012, 22:00
	Это не баг. Это нормальное поведение дивов в потоке. 1

@Зверушь 461 / 369 / 94 Регистрация: 01.05.2010 Сообщений: 1,761
	27.11.2012, 22:27
	Taatshi, можно поподробнее, пожалуйста? Очень интересно, почему так происходит. 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	27.11.2012, 23:53
	Зверушь, http://softwaremaniacs.org/blo... yout-flow/ 1

в попсовых браузерах margin-top криво работает

Решение