Загрузка. Пожалуйста, подождите...
|
|
Браузеры и стандарты. Вечная погоня. 1. Box Model хакBox Model хак используется для того, чтобы справиться с глюком эксплорера, в котором border и padding включаются в ширину элемента padding: 4em;
border: 1em solid red;
width: 30em;
width/**/:/**/ 25em;
Посмотреть на примере. 2. Условные комментарииУсловные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой: <!--[if условие]> HTML <![endif]-->
Если же вы хотите проигнорировать эксплорером какой-то кусок кода, то используйтетакой комментарий: <!--[if !condition]> HTML <![endif]-->
Условие может быть таким: IE – для любой версии IE <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie_sucks.css" /> <![endif]-->3. Min-width и max-width: максимальная и минимальная ширина блокаIE, падла, не понимает эти свойства css. Хак для блока с id “wrapper”
выглядит так: #wrapper{
min-width: 750px;
width:expression(document.body.clientWidth < 750? "750px": "auto" );}
Б) Максимальная ширина 1220px, минимальная 750px #wrapper{
min-width: 750px;
max-width: 1220px;
width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");}
Min-height хак от Дастина Диаза elector {
min-height:500px;
height:auto !important;
height:500px; }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 некоторые свойства. Делается это так: *:first-child+html #news .title {/*необходимые свойства*/} 5. !importantУ IE версии 6 и меньше проблемы с идентификатором !important, который используется для того, чтобы объявление некоторого свойства было проигнорировано, даже если это объявление появляется позже текущего. Пример:
6. @import “nonie.css” all;IE 7 и ниже не поддерживает медиаселекторы @import. Поэтому можно написать css для нормальных браузеров и импортировать его в ваш css используя @import “nonie.css” all;
Этот хак работает для IE версии 7 и ниже, может не работать в следующих версиях IE 7. body[class|="page-body"]<style type="text/css">
p
{
background: red; /* Применимо ко всем браузерам */
}
body[class|="page-body"] p
{
background: green; /* Применимо к IE7 и большинству нормальных браузеров, кроме Оперы */
}
</style>
Все вышеназванные хаки используют валидный css. Следующие позволят вам быстро решить проблему, но сделают css не валидным. НЕ советуется для использования. 8. Подчеркивание и дефисЕсли перед свойством в css поставить подчеркивание “_”, или дефис “-“, то эти свойства будут восприниматься только IE версии 6 и ниже. Пример использования: <style type="text/css">
p { background: red; /* Применимо ко всем браузерам */ _background: green; /* Применимо к IE6 и ниже */ }</style>9. ЗвездочкаРаботает для IE7 и ниже <style type="text/css"> p {
Напомню, что этот хак использует невалидный css и является нерекомендуемым к использованию. 10. body:emptyВообще говоря, :empty – это псевдо класс, который описан для CSS3, и который должен выбирать элементы, которые не имеют внутри других элементов или текста. Тем не менее, если использовать его для элемента body, Firefox 1.5 и Firefox 2 всегда выбирают его, даже если внутри тэга боди есть содержимое. Итак, этот хак скорее всего будет валидным в CSS3, но в настоящее время не является валидным для CSS2.x. Резюмируем: body:empty{}
выбирает тэг body в FF1.5 и FF2.0. Может быть не будет работать в следующих версиях. 11. a:link:visited, a:visited:linkВ соответствии со стандартами, псевдотеги :link и :visited взаимно исключаемы, то есть :link означает непосещенную ссылку. Тем не менее, IE 7 и ниже проигнорируют эти псевдо-классы, если какой-нибудь другой появится ниже в том же селекторе. Пример: a:link:visited, a:visited:link {}
выбирает элемент a в IE7 и ниже. 12. >body>body {} выбирает элемент body только в IE7. 13. html* {}html* {} выделяет все элементы внутри элемента html. Только для IE7 и ниже. 14. !important!Как мы уже говорили, у эксплорера нелюбовь с идентификатором !important. Зато он понимает идинтификатор !important! (другие браузеры не воспринимают такое свойство). Работает для IE7 и ниже. На этом обзор хаков закончен. Надеемся вам понравилось. О PNG и прозрачности будет написано в другой статье. Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
|
В избранное
