Поддержка размера окна в IE7

Ответ 1

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

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

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

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

Ответ 2

Есть несколько способов сделать это, ни один не идеальный.

Как вы указываете:

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

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

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

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

2. Размер шкалы Schepp Polyfill:

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

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

3. Старый стиль Вложенные Divs:

Старый стиль вложенного подхода 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 padding в div содержимого, но без запуска ошибки в коробке.

5. Рассмотрите возможность сброса поддержки IE7

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

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

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

Ответ 3

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

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

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

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