поддержка размеров коробки в IE7

Question

Я только что обнаружил свойство box-sizing: border-box CSS, которое решает для меня кучу проблем с разметкой браузера.

Единственная проблема, с которой я столкнулся, заключается в том, что IE7, похоже, не поддерживает ее. Есть ли взломать IE7 для поддержки?

Answer 1

Есть несколько способов сделать это, но ни один из них не совершенен.

Как вы указали:

• Firefox / Opera / Safari / Chrome / IE8 + распознает свойство размера блока, позволяющее вам использовать границы.
• IE6 будет использовать старую (правильную?) Модель рамки по умолчанию.
• Однако IE7 использует модель блока заполнения W3C в стандартном режиме и не распознает свойство размера блока CSS, поэтому нет способа вернуться к модели рамки. Если вам нужна поддержка IE7 (и вы, вероятно, все еще делаете это), у вас есть один из четырех вариантов:

1. Условные комментарии:

<!--[if IE 7]>
  Special instructions for IE 7 here
<![endif]-->

Используйте размеры блока для IE8 и 9, затем сделайте определенные переопределения для IE7. Этот вариант будет болезненным.

2. Шипп Коробка проклеивающая полифилл:

https://github.com/Schepp/box-sizing-polyfill

Этот превосходный Polyfill - это файл HTC, который изменяет поведение браузера по умолчанию в IE6 и 7, поэтому они используют блочную модель W3C. Это хорошо для легкого использования, но может вызвать проблемы самостоятельно, если используется широко. Используйте с осторожностью и ТЕСТ.

3. Вложенные Div в старом стиле:

Подход с вложенным div в старом стиле все еще хорош:

<div style="width:100px; border:1px solid black">
  <div style="margin:10px">
    Content
  </div>
</div>

Несемантический вложенный div обеспечивает косвенное заполнение, с тем недостатком, что ваша разметка становится неопрятной. Очевидно, что не используйте встроенные стили, я использую их здесь для иллюстрации.

Старая поговорка Никогда не используйте отступы для элемента фиксированной ширины все еще остается верным.

4. Мое предпочтительное решение - прямой выбор ребенка:

И наоборот, с помощью прямого дочернего селектора. Допустим, у вас есть div с фиксированной шириной, содержащий некоторое содержимое:

<div class="content">
  <h1>Hi</h1>
  <p>hello <em>there</em></p>
</div>

Затем вы можете написать правило для добавления левого и правого полей для всех прямых потомков div:

.content {
  width:500px;
  padding:20px 0;
}
.content > * {
  margin:0 20px;
}

Это добавит небольшой запас к h1 и p, но не к вложенным em, создавая видимость заполнения 20px для содержимого div, но не вызывая ошибку модели блока.

5. Рассмотрим прекращение поддержки IE7

IE7 - последний браузер, который не распознает свойство размера блока. Если вы получаете мало трафика из IE7, вы могли бы рассмотреть вопрос о прекращении поддержки. Ваш CSS будет намного приятнее.

По состоянию на конец 2013 года это мой предпочтительный вариант.

---

РЕДАКТИРОВАНИЕ 2017: Вероятно, уже давно пора отказаться от поддержки IE7 и просто использовать border-box.

Answer 2

Вы можете использовать полифилл, чтобы он работал с некоторыми элементами, хотя он не работал для моих полей ввода.

https://github.com/Schepp/box-sizing-polyfill

box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);

Просто обратите внимание, что URL-адрес поведения относится к странице, а не к css-файлу. Используйте относительные пути к корню сайта (начинайте URL с косой черты, а затем переходите оттуда).

Answer 3

Я предполагаю, что вы используете это, чтобы обойти блочную модель IE6. К сожалению, на самом деле нет общего способа обмануть более ранние версии IE в поддержке произвольных свойств CSS.

Я бы рекомендовал не использовать свойство box-sizing, потому что каждый браузер, кроме IE6, будет правильно реализовывать блочную модель. Статья Википедии хорошо объясняет разницу между IE6.

Чтобы решить эту проблему, я рекомендую использовать отдельную таблицу стилей для IE6 и включить ее, используя IE условные комментарии . В своей таблице стилей IE6 вы можете указать различные ширины / высоты / отступы / поля, чтобы макет выглядел согласованно. Вы можете включить таблицу стилей для IE6 только так:

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