CSS-хакиБраузеры и стандарты. Вечная погоня. 1. Box Model хакBox Model хак используется для того, чтобы справиться с глюком эксплорера, в котором border и padding включаются в ширину элемента
Посмотреть на примере.
2. Условные комментарииУсловные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой: Если же вы хотите проигнорировать эксплорером какой-то кусок кода, то используйте такой комментарий: Условие может быть таким: IE – для любой версии IE Пример использования:
3. Min-width и max-width: максимальная и минимальная ширина блокаIE, падла, не понимает эти свойства css. Хак для блока с id “wrapper” выглядит так: Б) Максимальная ширина 1220px, минимальная 750px Min-height хак от Дастина Диаза
4. Простые селекторыНе обязательно создавать отдельные css-файлы для разных браузеров, если разница в рендеринге не так уж велика.Можно использовать следующие css-селекторы в вашем основном css-файле: IE 6 и ниже * html {} IE 7 и ниже *:first-child+html {} * html {} IE 7 только *:first-child+html {} IE 7 и нормальные браузеры html>body {} Только нормальные браузеры (не IE 7) html>/**/body {} Опера версии 9 и ниже html:first-child {} Пример использования: Пусть нам надо назначить для для селектора #news .title только в IE7 некоторые свойства. Делается это так:
5. !importantУ IE версии 6 и меньше проблемы с идентификатором !important, который используется для того, чтобы объявление некоторого свойства было проигнорировано, даже если это объявление появляется позже текущего. Пример:
6. @import “nonie.css” all;IE 7 и ниже не поддерживает медиаселекторы @import. Поэтому можно написать css для нормальных браузеров и импортировать его в ваш css используя Этот хак работает для IE версии 7 и ниже, может не работать в следующих версиях IE
7. body[class|="page-body"]Все вышеназванные хаки используют валидный css. Следующие позволят вам быстро решить проблему, но сделают css не валидным. НЕ советуется для использования.
8. Подчеркивание и дефисЕсли перед свойством в css поставить подчеркивание “_”, или дефис “-“, то эти свойства будут восприниматься только IE версии 6 и ниже. Пример использования:
9. ЗвездочкаРаботает для IE7 и ниже Напомню, что этот хак использует невалидный css и является нерекомендуемым к использованию.
10. body:emptyВообще говоря, :empty – это псевдо класс, который описан для CSS3, и который должен выбирать элементы, которые не имеют внутри других элементов или текста. Тем не менее, если использовать его для элемента body, Firefox 1.5 и Firefox 2 всегда выбирают его, даже если внутри тэга боди есть содержимое. Итак, этот хак скорее всего будет валидным в CSS3, но в настоящее время не является валидным для CSS2.x. Резюмируем: выбирает тэг body в FF1.5 и FF2.0. Может быть не будет работать в следующих версиях.
11. a:link:visited, a:visited:linkВ соответствии со стандартами, псевдотеги :link и :visited взаимно исключаемы, то есть :link означает непосещенную ссылку. Тем не менее, IE 7 и ниже проигнорируют эти псевдо-классы, если какой-нибудь другой появится ниже в том же селекторе. Пример: выбирает элемент a в IE7 и ниже.
12. >body>body {} выбирает элемент body только в IE7.
13. html* {}html* {} выделяет все элементы внутри элемента html. Только для IE7 и ниже.
14. !important!Как мы уже говорили, у эксплорера нелюбовь с идентификатором !important. Зато он понимает идинтификатор !important! (другие браузеры не воспринимают такое свойство). Работает для IE7 и ниже. На этом обзор хаков закончен. Надеемся вам понравилось. О PNG и прозрачности будет написано в другой статье. |
СпонсорыСлучайные статьиБлогорол
|
||
|
|||