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

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

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

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

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

Размеры коробки 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>

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.