Используйте !important, чтобы устранить различия в макете между IE и Mozilla.

Автор：Eve Cole Время обновления：2009-05-31 00:31:24

Эффект в IE

Эффекты в Mozilla Firefox

Эффекты в Firefox

Это вызвано ошибкой в интерпретации IE расстояния между блоками (см. «Проблемы с плавающими моделями» onestab). Я так и не решил эту проблему, пока не перевел «Таблица против CSS — битва жизни и смерти». Совет от автора помог мне найти решение: используйте !important.

!important — это синтаксис, определенный в CSS1. Его функция — повысить приоритет применения указанных правил стиля (см. объяснение на сайте W3.org). Формат синтаксиса { sRule!important } пишется в конце определения, например:

коробка {цвет: красный ! важно;}

Самый важный момент: IE никогда не поддерживал этот синтаксис, но другие браузеры поддерживают. Следовательно, мы можем использовать это для определения различных стилей для IE и других браузеров. Например, мы определяем такой стиль:

.colortest {

граница: 20 пикселей, сплошная #60A179 !важно;

граница: 20 пикселей, сплошная #00F;

отступ: 30 пикселей;

ширина: 300 пикселей;

}

При просмотре в Mozilla вы можете понять приоритет !important, поэтому отображается цвет #60A179:

Цвет дисплея #60A179 в Mozilla.

При просмотре в IE приоритет !important не понимается, поэтому отображается цвет #00F:

Цвет #00F, отображаемый в IE

Как видите, используя !important, мы можем установить разные стили для браузеров IE и отличных от IE, просто добавьте !important после стиля браузера, отличного от IE. Таким образом, упомянутую выше разницу в отображении на моей домашней странице в 2 пикселя можно легко решить:

PADDING-TOP: 11px !important;

PADDING-ВЕРХ: 9 пикселей;

!important обязательно станет мощным инструментом для CSS-верстки, запомните и освойте его :)