Как включить размер ящика в Internet Explorer 7

Мы рассмотрели CSS3 Box Sizing в предыдущей статье. Размер блока, со значением border-box, позволяет нам сохранять ширину и высоту элемента независимо от того, какие дополнительные отступы и границы он имеет.

Это облегчает измерение и определение размера элемента. Однако CSS3 Box Sizing не будет работать в Internet Explorer 7 (IE7) и более ранних версиях, как вы можете видеть ниже.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Вам нужно будет соответствующим образом настроить размер каждого столбца, чтобы они поместились в нем, что может быть очень утомительным занятием в зависимости от количества элементов, которые вам нужно обработать. Если ваш сайт должен поддерживать IE7 (по какой-либо причине), сохраняя при этом CSS3 Box Sizing, вы можете воспользоваться следующим приемом.

Рекомендуемое чтение: взгляд на HTML5 Shiv и Polyfills

Размеры коробки Polyfill

Чтобы IE8 (и ниже) признавал размеры ящика, мы можем использовать полифилл. Этот полифилл поставляется в виде файла HTC и разработан Кристиан Шефер, Загрузите файл из репозитория Github и поместите его, например, в свою папку CSS.

Создайте таблицу стилей CSS, предназначенную для Internet Explorer. Добавьте ссылку в HTML-документ таким образом, чтобы она обслуживалась только в IE7.

Затем поместите следующий код в ie.css. Это правило CSS ниже будет применять размер блока для всех элементов.

{
поведение: url (css / boxsizing.htc);
}

Несколько вещей, на которые следует обратить внимание при применении этого трюка:

Путь url в boxsizing.htc должен быть указан относительно расположения файлов HTML, иначе он не будет работать.

Пол Ирландский также имеет Подсказка применить размер блока в псевдоэлементе с *: before, *: after. Но, поскольку IE7, как и IE6, не поддерживает псевдоэлемент, в этом случае нет причин использовать селекторы псевдоэлементов. И, как вы можете видеть выше, мы не включаем их и в код.
Результат
Здесь у нас есть два столбца с шириной родительского контейнера, установленной на 500 пикселей. Ширина столбца установлена на 50%, поэтому каждый столбец должен иметь ширину 250 пикселей, хотя мы также установили для него отступы. Давайте откроем Internet Explorer 7 и запустим инструмент разработчика (F12).

Перейдите на вкладку Layout инструмента Developer, чтобы увидеть размер столбца в деталях. Вы должны увидеть, что в IE7 столбец теперь включает отступы, а также границы как часть общего размера. В нашем случае ширина поля остается на уровне 250 пикселей.

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>