Page 293 - Сила CSS3 Освой новейший стандарт

Альтернативы модели гибкого поля • 293

коротко о СвойСтве box-SIzInG
Свойство box-sizing входит в модуль Basic User Interface (Базовый интерфейс пользователя),
адрес которого http://www.w3.org/TR/css3-ui. Оно позволяет выбирать одну из двух моде-
лей поля: content-box (забивка пустыми символами и рамка добавляются к объявленным
значениям ширины и высоты) или border-box (забивка пустыми символами и рамка вы-
читаются из объявленных значений ширины и высоты).
Firefox поддерживает третье значение, padding-box. В этом случае из размеров поля вы-
читается только забивка пустыми символами, но не рамка. Данное значение не входит
в спецификацию W3C и вряд ли будет в нее добавлено.
Свойство box-sizing удобно использовать для решения следующих задач:
• использование разных единиц измерения для определения размеров одного поля;
это дает вам возможность вычислять общее занимаемое полем пространство и осво-
бождать для него место рядом с другими полями;

• растягивание поля до 100% ширины родительского элемента без необходимости из-
бавляться от забивки пустыми символами и рамок.

Обходные пути для IE 7 и более ранних версий
Браузер IE версии 7 и более ранних не поддерживает свойство box-sizing, которое,
как и модель гибкого поля, не просто создает декоративный эффект, а кардинально
меняет страницу. Следовательно, вы наверняка захотите добавить обходной путь.
В нашем случае самым простым вариантом будет определение ширины забивки
пустыми символами в процентах, а не в пикселах, и уменьшение ширины каждого
поля на это значение. Добавьте следующее новое правило:
.ie6 .feature, .ie7 .feature {
width: 25.5%;
padding: 130px 2% 5px 2%;
}

Фактически ширина поля все так же остается
на уровне 30%: 2% забивки с каждой стороны Завершенная страница называ-
плюс 25% содержимого дают в сумме 29,5%, что ется box-sizing_final.html. Она
оставляет немного пространства для добавления сохранена в папке с остальными
пиксельных рамок. Хотя определение ширины файлами упражнений для этой
забивки в процентах — не идеальное решение, главы.
результат не сильно отличается от забивки точ-
ным количеством пикселов и, определенно, смотрится куда лучше, чем третье поле,
падающее на новую строку!

Альтернативный вариант подразумевает перевод IE в режим совместимости (quirks
mode), в котором используется тот же тип модели поля, что и с border-box. Но я
не рекомендовала бы так делать. Во-первых, IE 7 значительно сложнее перевести

www.trk.kg