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.

Так как же этого избежать?