Internet Explorer и блочная модель CSS

  1. Блочная диаграмма CSS
  2. Модель W3C Box
  3. Модель IE Box
  4. IE версии
  5. Нападение на проблему
  6. 1. Избегайте ситуаций, которые вызывают проблемы
  7. 2. Вставьте дополнительную разметку
  8. 3. Используйте условные комментарии
  9. 4. Используйте CSS-хаки
  10. Заключение

Одно из различий между Internet Explorer и веб-браузерами, совместимыми со стандартами, которые доставляют немало хлопот начинающим пользователям CSS, - это блочная модель CSS. Поскольку блочная модель - это то, что браузеры используют для вычисления общей ширины и высоты элемента, вполне понятно, что разные браузеры, выдающие разные результаты, могут быть как запутанными, так и разочаровывающими.

Как работает блочная модель CSS, уже много раз объясняли другие. Тем не менее, и часто встречаются сайты, которые ожидают, что браузеры будут использовать нестандартный способ расчета размеров блоков в Internet Explorer. Вот почему я написал эту статью, которая в значительной степени является переводом статьи, которую я написал для шведского журнала CAP & Design в начале этого года.

Если вы уже знаете, как работают различные блочные модели и как работать с Internet Explorer, здесь нет ничего нового для вас. Если вы получаете разные размеры блоков в IE и других браузерах, не зная почему, продолжайте читать.

Блочная диаграмма CSS

Вот простая диаграмма, показывающая, как размеры элемента связаны в CSS:

Вот простая диаграмма, показывающая, как размеры элемента связаны в CSS:

Для целей этой статьи все браузеры обрабатывают свойство margin одинаково при расчете общей ширины элемента, поэтому я сосредоточусь на свойствах padding и border.

Модель W3C Box

Сначала посмотрим на модель коробки W3C , который используется всеми совместимыми со стандартами браузерами и Internet Explorer 6 и более поздними версиями, если обстоятельства верны. В блочной модели W3C CSS уровень блока общая ширина элемента рассчитывается по следующей формуле:

общая ширина = поле слева + рамка слева + отступ слева + ширина + поле справа + рамка справа + поле справа

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

Модель IE Box

Модель IE Box аналогична, за исключением одного важного различия: отступы и границы не включены в расчет:

общая ширина = поле слева + ширина + поле справа

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

IE версии

Версии 5.5 и более ранние версии Internet Explorer для Windows всегда используют модель IE Box. Многие не знают о том, что IE 6 и более поздние версии используют блочную модель W3C, когда в режим соответствия стандартам , Это хорошо, поскольку это означает, что проблемы будут возникать только в IE / Win 5.5 и более ранних версиях, при условии, что вы используете DOCTYPE, который заставляет IE использовать стандарты, совместимые с режимом.

Нападение на проблему

Убедившись, что IE 6 находится в режиме совместимости со стандартами, вам нужно заботиться обо всем этом, только если вы по-прежнему обеспокоены тем, что ваши сайты выглядят так же, как в IE 5. * / Win, как и в более поздних браузерах. Если это касается и вас, есть несколько способов решения проблемы, перечисленные здесь в моем порядке предпочтений:

  1. Избегайте ситуаций, которые вызывают проблемы
  2. Вставить дополнительную разметку
  3. Используйте условные комментарии
  4. Используйте CSS хаки

Поскольку проблемы, вызванные различиями в моделях Box, часто носят исключительно косметический характер, я предпочитаю просто не беспокоиться о IE 5. * / Win. Иногда это неприемлемо, и мне приходится использовать один из методов, которые я опишу здесь.

1. Избегайте ситуаций, которые вызывают проблемы

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

Позвольте мне использовать пример для иллюстрации. HTML-код, используемый для разметки списка новостных статей, может выглядеть так (упрощенно):

<div id = "news"> <h2> Новости </ h2> <ul> <li> <h3> Новостная статья 1 </ h3> <p> Lorem ipsum dolor sit amet </ p> </ li> <li > <h3> Новостная статья 2 </ h3> <p> Lorem ipsum dolor sit amet </ p> </ li> </ ul> </ div>

Чтобы сделать список шириной 250 пикселей с границей в один пиксель и отступом в 10 пикселей, вы можете использовать следующий CSS:

#news {padding: 10px; граница: 1px solid; ширина: 228px; }

В совместимых со стандартами браузерах общая ширина будет составлять 250 пикселей (левая граница 1 пиксель + левый отступ 10 пикселей + ширина + правый отступ 10 пикселей + правая граница 1 пиксель). В IE 5.5 и более ранних версиях общая ширина будет 228 пикселей, так как он не добавляет отступы и границы.

Так как же этого избежать? Предположим, что список новостей находится в другом контейнере, например, на боковой панели:

<div id = "sidebar"> <div id = "news"> ... </ div> </ div>

Если это так, вы можете установить ширину этого контейнера:

#sidebar {width: 250px} #news {padding: 10px; граница: 1px solid; }

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

2. Вставьте дополнительную разметку

Если вы не можете использовать метод 1, другой метод - вставить дополнительную разметку. Используя тот же пример, что и ранее, предположим, что #news не должен расширяться до полной ширины #sidebar. Указание ширины для #news для предотвращения этого сценария, который вы хотите избежать. Обходной путь должен изменить разметку на это:

<div id = "news"> <div> <h2> News </ h2> <ul> ... </ ul> </ div> </ div>

и используйте следующий CSS:

#news {width: 250px} #news div {padding: 10px; граница: 1px solid; }

Внешний элемент контролирует ширину, а внутренний элемент содержит границу и отступ.

Вам решать, будет ли разумным компромисс добавить такую ​​разметку, как эта. Очевидно, будет лучше, если вы сможете избежать этого, но дополнительный элемент div не вызывает никаких других проблем, кроме увеличения размера файла и незначительного снижения удобства поддержки разметки. Это не влияет на доступность или то, как документ представлен с выключенным CSS. Кроме того, наличие дополнительного элемента необходимо для создания определенных дизайнов, поэтому у вас уже может быть нужная разметка.

3. Используйте условные комментарии

Если нет подходящего элемента, который можно использовать для управления шириной, и вы не можете или не хотите добавлять дополнительную разметку, IE 5. * / Win необходимо получить другое значение для ширины.

На мой взгляд, самый безопасный способ сделать это - использовать условные комментарии , которые являются комментариями, содержание которых видно только в IE / Win. В этом случае только IE ниже версии 6 должен получить содержимое:

<! - [if lt IE 6]> <style type = "text / css"> #news {width: 250px} </ style> <! [endif] ->

Если вы решите использовать этот метод, я рекомендую переместить все IE 5. * / Win для конкретного CSS в отдельный файл и загрузить его следующим образом:

<! - [if lt IE 6]> <link rel = "stylesheet" type = "text / css" href = "/ css / ie5.css"> <! [endif] ->

Это безопасный способ гарантировать, что только браузеры, которым нужен модифицированный CSS, видят эти правила.

4. Используйте CSS-хаки

Наконец, вы также можете использовать CSS взломать предоставлять измененные значения в IE 5. * / Win. Я рекомендую избегать CSS хаков как можно больше. Как следует из названия, это хаки и хаки, основанные на недокументированных ошибках при разборе CSS в разных браузерах. Поскольку многие люди до сих пор используют CSS-хаки, я все равно упоминаю об этом. Я настоятельно рекомендую вам рассмотреть другие варианты перед их использованием, если вы точно не знаете, что делаете.

Простейший CSS-хак для решения проблем блочной модели: Упрощенная блочная модель взлома , SBMH. При условии, что HTML такой же, как в первом примере, CSS будет выглядеть так:

#news {padding: 10px; граница: 1px solid; ширина: 250px; ж \ IDþ: 228px; }

Все браузеры видят и понимают ширину: 250 пикселей. IE 5. * / Win не понимает следующую строку, w \ idth: 228px, что делают все совместимые со стандартами браузеры. В результате в браузерах, совместимых со стандартом IE 5. * / Win и 228px, ширина установлена ​​равной 250px, что обеспечивает одинаковую общую ширину списка во всех браузерах.

Заключение

Как я показал здесь, можно избежать или обойти проблемы, вызванные различными блочными моделями CSS. Какой метод вы используете, будет зависеть от обстоятельств.

Я должен также упомянуть, что когда-то в далеком будущем, CSS 3 `Коробчатого sizing` Свойство позволит вам выбрать, какую блочную модель CSS вы хотите использовать в браузерах. Блочная модель W3C называется content-box, а блочная модель Internet Explorer называется border-box. Возможность контролировать это во всех браузерах - это хорошо, так как у каждой модели есть свои плюсы и минусы. Однако поддержка браузера в настоящее время слишком ограничена, чтобы это свойство могло иметь какое-либо практическое применение.

Надеюсь, ничего из этого не понадобится через пару лет. IE 7 был выпущен в октябре 2006 года, и с каждым днем ​​все меньше и меньше используют старые версии IE. Для некоторых сайтов уже приемлемо скрывать весь CSS от IE / 5. * или просто не заботиться о различиях рендеринга.

Я оставлю вам решать, когда вы сможете начать скрывать CSS от IE 5. * / Win.

Похожие

Будущее Joomla - это CSS Grid, а не Bootstrap 4
Joomla 4 в данный момент находится в разработке. До выхода Joomla 4 может пройти много месяцев, но мы уже работаем над совместимостью шаблонов Joomlashack. Одним из наиболее важных изменений в Joomla 4 является обновление Bootstrap 2 до Bootstrap 4. Однако мы обнаружили, что Joomla 4 не будет полагаться исключительно на Bootstrap. Joomla 4 также будет полагаться на CSS Grid Layout, метод CSS, который произвел революцию в индустрии веб-дизайна. Bootstrap 4 и CSS
Как исправить проблему с «слишком большой мощностью» на iPad?
Apple продает два адаптера камеры для iPad, один с USB-портом на конце и один с гнездом для SD-карты. Для 30-контактных iPad эти два пакета поставляются в комплекте, в то время как для нового iPad-адаптера Lightning требуются более дорогие версии, которые продаются отдельно. Эти адаптеры
описание продукта Kaspersky Internet Security 2010 обеспечивает самую передовую в мире защиту ПК с пре...
описание продукта Kaspersky Internet Security 2010 обеспечивает самую передовую в мире защиту ПК с превосходной защитой от всех вредоносных программ. Когда вы покупаете Kaspersky, вы получаете больше, чем просто пакет программного обеспечения. Вы воспользуетесь уникальными технологиями, которые обеспечивают лучшие из доступных утилит защиты, производительности и безопасности. Поднимите защиту от постоянно растущей угрозы киберпреступников! amazon.com Самое
Телефоны Nokia PureView снова стали возможными
... iew-snova-stali-vozmoznymi-1> Кто-нибудь помнит Nokia 808 PureView смартфон запущен еще в 2012 году? Это может прозвенеть, но, скорее всего, вы вспомните новости о запуске Nokia телефона с 41-мегапиксельной камерой. Оказывается, что камера PureView была новаторской, а сам телефон был намного меньше. Теперь PureView может вернуться, благодаря HMD Global. Ситуация с PureView осложнилась, когда Microsoft приобрела
Играйте в Command and Conquer Generals на своем современном ПК
... используйте «Resolution = 1920 1080». Для дисплея с разрешением 720p в строке должно быть указано «Resolution = 1280 720» (без кавычек). Для других разрешений просто замените номера на те, которые соответствуют вашему монитору. Обязательно сохраните файл, когда закончите редактирование. Возможно, вы захотите сделать резервную копию этого файла сейчас, перед тем как начать играть, на случай, если игра перезапишет какие-либо из примененных вами пользовательских настроек.
Обзор Plextor M6 Pro SSD
Интерфейс SATA3 в настоящее время сильно насыщается сверхбыстрыми твердотельными накопителями, что является основной причиной создания SATA-Express. Однако, по большей части, этот новый интерфейс не получит массового распространения до тех пор, пока не пройдут несколько циклов работы материнской платы, поэтому SATA3 по-прежнему остается наиболее предпочтительным выбором для решений хранения данных. В связи с тем, что твердотельные накопители развиваются так быстро, а SATA3 по-прежнему насыщен,
Как просмотреть исходный код HTML в Microsoft Word
Обновлено: 24.01.2008 от Computer Hope Microsoft Word поддерживает возможность сохранения любого документа в виде веб-страницы. Однако, хотя можно сохранить документ в виде веб-страницы, нет способа просмотреть исходный код в самых последних версиях Microsoft Word. Microsoft Word 2007, 2010 и более поздние версии Как упомянуто выше, нет никакого
Планы изменений в алгоритме, который определяет содержание в ленте новостей Facebook предал на прошлой неде...
Планы изменений в алгоритме, который определяет содержание в ленте новостей Facebook предал на прошлой неделе Также подтвердил руководитель службы Марк Цукерберг. Цукерберг объявил, что в ближайшие месяцы в новостях на верхних позициях будет в основном контент от друзей или семьи пользователя. Таким образом, материалы, опубликованные компаниями и издателями,
[Решено] Как исправить проблемы с Bluetooth на iOS 11/12
Новая система iOS всегда идет с новыми проблемами, для пользователей, которые обновляют свои iPhone / iPad / iPod до бета-версии iOS 12 или iOS 11.4 / 11.3 / 11.2, большинство из них столкнется с некоторыми проблемами. Если вы являетесь пользователем Bluetooth, вас также может раздражать, что с iOS 11/12 также возникают проблемы с Bluetooth .
Как изменить друзей Facebook, которые могут видеть вас в Интернете
Реклама Facebook довольно открыто говорит о своих целях: компания мечтает о мире, в котором каждый всегда на связи. Возможно, поэтому так сложно появляться в офлайн-чате в Facebook. Сама идея «офлайн» или «невидимка» является антитезой всему, во что верит социальная сеть. Однако быть «невидимым» не для всех. К счастью, возможно сохранить завесу конфиденциальности, в то же время сообщая своим близким друзьям и семье, что вы готовы к разговору. Вот как решить, какие друзья
Удаление вируса iPhone (Руководство по удалению) - обновлено июль 2019 г.
Вирус iPhone - это термин, используемый для описания вредоносных программ, которые влияют на устройства iPhone. Вирус iPhone может незаметно проникнуть в систему и работать в фоновом режиме без предварительного уведомления. Вирус iPhone

Комментарии

Как мы решаем такую ​​проблему?
Как мы решаем такую ​​проблему? Вы знаете, что у вас есть проблема, когда дизайнер представляет следующий вид вместо вашей формы или пользовательского элемента управления.
Если вы найдете решение, можете ли вы поместить его в комментарии для других пользователей?
Если вы найдете решение, можете ли вы поместить его в комментарии для других пользователей? Если у вас есть другие вопросы, вы также можете оставить комментарий.
Если вы никогда ранее не использовали CSS-препроцессор и сталкивались со статьями, которые ссылаются на Sass или SCSS, вам может быть интересно, в чем разница?
Если вы никогда ранее не использовали CSS-препроцессор и сталкивались со статьями, которые ссылаются на Sass или SCSS, вам может быть интересно, в чем разница? Эти два термина часто используются взаимозаменяемо, и на простом языке, часто относятся к одному и тому же - препроцессор CSS называется пререкаться , пререкаться расшифровывается как синтаксически удивительные таблицы стилей. Это один из старейших
Если существуют извращенцы, которые тайно фотографируют нижнее белье женщин на улицах - значит ли это, что женщина, которой не нравится, не должна выходить в юбке?
Если существуют извращенцы, которые тайно фотографируют нижнее белье женщин на улицах - значит ли это, что женщина, которой не нравится, не должна выходить в юбке? Голдберг приводит пример с известной спортивной репортером ESPN Эрин Эндрюс (Erin Andrews), которая стала жертвой тайной видеосъемки в номере отеля. Инцидент произошел 2008 года, когда Майкл Баретт сделал несколько видео, на которых она полностью обнажена. Позже видео появились в интернете и стали предметом длительного судебного разбирательства,
Каковы преимущества использования элементов <select> для меню и каковы проблемы?
Каковы преимущества использования элементов <select> для меню и каковы проблемы? Что вы определяете с элементами <area> и для чего нужен атрибут nohref элемента area (этого здесь нет, вам нужно провести некоторые онлайн-исследования) Каковы преимущества пропустить ссылки? Примечание. Этот материал был первоначально опубликован как часть учебной программы по стандартам веб-технологий Opera, доступной как

Так как же этого избежать?
Iew-snova-stali-vozmoznymi-1> Кто-нибудь помнит Nokia 808 PureView смартфон запущен еще в 2012 году?
Как мы решаем такую ​​проблему?
Если вы найдете решение, можете ли вы поместить его в комментарии для других пользователей?
Если вы найдете решение, можете ли вы поместить его в комментарии для других пользователей?
Если вы никогда ранее не использовали CSS-препроцессор и сталкивались со статьями, которые ссылаются на Sass или SCSS, вам может быть интересно, в чем разница?
Если вы никогда ранее не использовали CSS-препроцессор и сталкивались со статьями, которые ссылаются на Sass или SCSS, вам может быть интересно, в чем разница?
Если существуют извращенцы, которые тайно фотографируют нижнее белье женщин на улицах - значит ли это, что женщина, которой не нравится, не должна выходить в юбке?
Каковы преимущества использования элементов <select> для меню и каковы проблемы?
Что вы определяете с элементами <area> и для чего нужен атрибут nohref элемента area (этого здесь нет, вам нужно провести некоторые онлайн-исследования) Каковы преимущества пропустить ссылки?