Вверх

Блог
RSS лента

Как обмануть валидатор или хаки для разных браузеров, в том числе и ИЕ/IE

Vape Shop Эко Заправка

Что бы устранить какой либо баг в всеми "любимом" браузере ИЕ (руки бы переломал разработчикам за этот браузер) есть несколько способов, это использование условных операторов и использовать хаки в файле css.
Мелкософты понимая что их браузер далек от совершенства сами же и предлагают лекарства от ихних багов, удивительная логика.

Вот собствено условные операторы:
<!--[if condition]> HTML <![endif]-->
Вместо condition вы можете вставить такие значения:
IE
все версии эксплорера
lt IE 7
Версия ИЕ ниже семерки
lte IE
Версии ниже указанной или же равной ей.
IE 7
только указанная версия
gte IE 7
версии выше указанной или равной ей
gt IE 7
версии выше указанной

Примерчик:

  1. <head>
  2.  
  3. <title>Test</title>
  4. <link href="style.css" rel="stylesheet" type="text/css">
  5.  
  6. <!--[if IE]>
  7.  <link href="ie_style.css" rel="stylesheet" type="text/css">
  8. <![endif]-->
  9.  
  10. <!--[if lt IE 7]>
  11.    <link href="ie_6_style.css" rel="stylesheet" type="text/css">
  12.  <![endif]-->
  13.  
  14. </head>

Собственно смысл в следующем, вы создаете стиль который будет влиять на все браузеры, а уже условными операторами даете знать ИЕ браузеру что бы он грузил свой стиль.

А вот и хаки в файле стилей:

* html {}
Для ИЕ6 и ниже. примечание – код будет выглядеть приблизительно так * html #red{color: #000} Т.е. после хака нужно вставить нужный стиль, а в скобках те параметры, которые вы хотите, чтобы работали именно в определенном браузере

*:first-child+html {} * html {}
ИЕ 7 и ниже

*:first-child+html {}
Только ИЕ7

html>body {}
Новые браузеры и ИЕ7

html>/**/body {}
Новые браузеры, без ИЕ7

html:first-child {}
Опера 9 и ниже

Еще один способ обмануть ИЕ, это @import "non-ie.css" all;
Тоесть вы создаете отдельный файл стилей bez_ie.css, для всех браузеров, кроме ИЕ 7 и ниже, а в основном файле стилей прописать этот селектор. Он прикрепит к нашему основному файлу дополнительный, но фишка в том, что ИЕ7 и ниже не понимают этот селектор, а значит будут игнорировать этот файл.

И конечно же !important:
background: green !important; /* для браузеров, кроме ИЕ6 */
background: red; /* для IE 6 и ниже */
То есть в ИЕ6-ть у вас цвет будет красный, а в нормальных браузерах зеленый

Ну и еще несколько вариантов хаков:
Если перед свойством в css поставить подчеркивание “_”, или дефис “-”, то эти свойства будут восприниматься только IE версии 6 и ниже:
.style {_background:#F00;}

Звездочка. Работает для IE7 и ниже:

  1. p {
  2.  background:red; /* Применимо ко всем браузерам */
  3.  *background: green; /* Применимо к IE6 и ниже */
  4. }
  5.  
  6. #hack{
  7. color:green; /* IE 5.01 */
  8.  color/**/:blue; /* IE 5.5 */
  9.  c\olor red; /* IE 6 не работает перед буквами a, b, c, d, e, f */
  10. }

* html .ie6 {color:red;} /* Хак только для IE6 */

IE6 и ниже проигнорирует эти правила:

div>span {...}
div+span {...}

IE min-width & max-width: максимальная и минимальная ширина блока:

#element {
min-width:780px;
max-width:1260px;
width expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto");
}

Box Model. Хак используется для того, чтобы справиться с глюком эксплорера, в котором border и padding включаются в ширину элемента:

padding:4em;
border:1em solid red;
width:30em;
width/**/:/**/ 25em;

Min-height

selector {
min-height:500px;
height:auto !important;
height:500px; }

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),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;} /* только для Opera */
}

html:first-child {} /* только для Opera */

html:first-child .style {

background: #F00; /* только для Opera < 9.5 */

}

Можно создать файл opera.css и подключить его в head секции документа:

  1. <head>
  2.  
  3.     <link rel="stylesheet" href="css/opera.css" type="opera/css" media="screen" />
  4.  
  5. </head>

CSS хаки для FireFox:

html:first-child .class { color: #368EF1; } /* для FireFox */

@-moz-document url-prefix(){body { color: #368EF1; }}

CSS-хак для Safari

body:first-of-type #element { color: red; }

CSS-хак для Konqueror

html: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 */

Ваша оценка: Пусто Средняя: 2.8 (4 голосов)

Комментарии

Спасибо

Спасибо за интересную статью -выручили. Опубликовала ссылку на одном из форумов.

Перевел интересную статью по

5

Перевел интересную статью по CSS хакам. Возможно будет полезной http://www.clearboth.ru/article/css-hacks-for-firefox-opera-safari-and-i...

Главная | Портфолио | Услуги | Контакты | Блог