|
||||||
|
Как обмануть валидатор или хаки для разных браузеров, в том числе и ИЕ/IEЧто бы устранить какой либо баг в всеми "любимом" браузере ИЕ (руки бы переломал разработчикам за этот браузер) есть несколько способов, это использование условных операторов и использовать хаки в файле css. Вот собствено условные операторы: Примерчик:
Собственно смысл в следующем, вы создаете стиль который будет влиять на все браузеры, а уже условными операторами даете знать ИЕ браузеру что бы он грузил свой стиль. А вот и хаки в файле стилей:
Еще один способ обмануть ИЕ, это @import "non-ie.css" all; И конечно же !important: Ну и еще несколько вариантов хаков: Звездочка. Работает для IE7 и ниже:
* html .ie6 {color:red;} /* Хак только для IE6 */ IE6 и ниже проигнорирует эти правила: div>span {...} IE min-width & max-width: максимальная и минимальная ширина блока: #element { Box Model. Хак используется для того, чтобы справиться с глюком эксплорера, в котором border и padding включаются в ширину элемента: padding:4em; Min-height selector { Internet Explorer 7.0 и нижеНе все хаки для IE7 работают если в начале документа не указать !DOCTYPE. *+html .style { background: #F00;} html>body .style {*background: #F00;} *:first-child+html {} * html {} /* IE 7 и ниже */ *:first-child+html {} /* IE 7 только */ html>body {} /* IE 7 и нормальные браузеры */ html>/**/body {} /* Только нормальные браузеры (не IE 7) */ >body {} /* выбирает элемент body только в IE7 */ html* {} /* выделяет все элементы внутри элемента html. Только для IE7 и ниже. */ //width:100px; - так написаное свойство проигнорируют все браузеры кроме ie 7.0 и меньше .ie7b {#color:#00FF00;} /* Хак только для IE7,6 */ a:link:visited, a:visited:link В соответствии со стандартами, псевдотеги :link и :visited взаимно исключаемы, то есть :link означает непосещенную ссылку. Тем не менее, IE 7 и ниже проигнорируют эти псевдо-классы, если какой-нибудь другой появится ниже в том же селекторе. a:link:visited, a:visited:link {} a:link:visited, a:visited:link {} /* выбирает элемент a в IE7 и ниже */ CSS-хаки для браузера Opera@media all and (-webkit-min-device-pixel-ratio:10000), html:first-child {} /* только для Opera */ html:first-child .style { background: #F00; /* только для Opera } Можно создать файл opera.css и подключить его в head секции документа:
CSS хаки для FireFox:html:first-child .class { color: #368EF1; } /* для FireFox */ @-moz-document url-prefix(){body { color: #368EF1; }} CSS-хак для Safaribody:first-of-type #element { color: red; } CSS-хак для Konquerorhtml:not(:nth-child(1)) #element { color: red; } Для нескольких браузеров:.class, x:-moz-any-link { color: #368EF1; } /* для FireFox, но так же работает в Internet Explorer 7 */ @media all and (min-width: 0) {.safariOperaChrome {color:#FF00FF;}} /* Хак только для Safari, Opera, Google Chrome*/ @media all and (min-width: 0) {div span { background: #FF0}} /*только для Opera* (так же видит Safari 3 и Google Chrome) / html:not([lang*=""]):not(:only-child) .ffSafariChrome {color:#990000;} /* Хак только для IE7, FireFox */html:root div {…} /* для Firefox (также видит safari3) */ html:root .ffSafariChrome {color:#660066;} /* Хак только для Safari, FireFox, Google Chrome */ body:first-of-type .operaChromeSafari {color:orange;} /* Хак только для Safari, Opera, Google Chrome */ html>/**/body {} /* Все современные браузеры, кроме IE 7 */ /*\*//*/selector{property:value;}/**/ /* MacIE */ |
|||||
Главная | Портфолио | Услуги | Контакты | Блог |
Комментарии
Спасибо
Спасибо за интересную статью -выручили. Опубликовала ссылку на одном из форумов.
Перевел интересную статью по
Перевел интересную статью по CSS хакам. Возможно будет полезной http://www.clearboth.ru/article/css-hacks-for-firefox-opera-safari-and-i...
Отправить комментарий