Хаки для браузеров

Вид для печати

13.02.2008, 08:57
QuickSite

Хаки для браузеров

пожалуйста, подскажите, возможно ли в стилевом файле прописать правило так, чтобы оно воспринималось только Ie7?
21.02.2008, 21:03
QuickSite

очень жаль, что ответ на этот вопрос так и не найден... (((
21.02.2008, 22:20
Exterior
QuickSite, есть разные способы добиться определенного отображения элементов для разных версий IE.

1-й способ) Использовать условные комментарии (Conditional comments) при линковании таблиц стилей между <head></head>. Пример:
```
<head>





<link href="main.css" rel="stylesheet" type="text/css">



































</head>
```
2-й способ) это использование хаков. В отличие от условных комментариев, хаки не обязательно разносить по отдельным файлам. Пример:

CSS:
```
p.text1 {

	backgroung: #0099CC;

	//background: #00FF99;

	_background: #0099CC;

	\\background: #FFCC99;

}
```
HTML:
```
<p class="text1">Цвет фона данного абзаца будет закрашен в зависимости от версии IE</p>
```
первое свойство увидят все браузеры;
второе - проигнорируют все браузеры кроме IE 7.0 и меньше;
третье - проигнорируют все браузеры кроме IE 6.0 и меньше;
четвертое - проигнорируют все браузеры кроме IE 5.0 и IE 5.5

а это свойство
CSS:
```
*:first-child+html p.text1 {

	background: #CC66CC;

}
```
воспримит только IE 7

3 способ) это использование JavaScript`ов для определения типа и версии браузера, и, исходя из полученных данных, загружать определенный стиль.
25.02.2008, 18:09
QuickSite

Exterior, спасибо, обязательно воспользуюсь каким-либо из перечисленных методов.
23.03.2008, 10:37
QuickSite

CSS для Opera

как прописать правило в Css файле, чтобы оно воспринималось только оперой?
23.03.2008, 11:18
QuickSite
Ответ на вопрос найден. Прошу прощения за беспокойство. Если кому интересно, то:

CSS-хаки для браузера Opera:
1. @media all and (min-width: 0)
2. {
3. .style { background: #FF0; }
4. }
1. html:first-child .style
2. {
3. background: #FF0;
4. }
5. /* код валидный */
CSS-хаки для браузера FireFox:
1. html:root .style
2. {
3. background: #FA0;
4. }
5. /* хак понимает Safari */
1. .style, x:-moz-any-link
2. {
3. background: #FA0;
4. }
15.05.2008, 10:36
Slash

Как заставить :hover работать в IE6?!
Напишите, пожалуйста, конкретно, что и где прописать, чтобы заставить такое:
```
"произвольный_тег" :hover{}
```
работать в IE6!!!
15.05.2008, 15:22
QuickSite
Slash, вообще, чтобы CSS-правило воспринималось только IE6 и ниже, надо написать так:
```
произвольный тег :hover

{

_произвольное свойство:произвольное значение

}
```
Тут вся магия в символе подчёркивания перед свойством.
29.05.2008, 18:48
m1kola
Цитата:
Сообщение от QuickSite

Slash, вообще, чтобы CSS-правило воспринималось только IE6 и ниже, надо написать так:

произвольный тег :hover
{
_произвольное свойство:произвольное значение
}

Тут вся магия в символе подчёркивания перед свойством.
Чиловек имел ввиду скорее всего немного другое... Но выразить понятно свою мысль не смог.

Дело в том, что IE6 и ниже не воспринимают псевдокласс :hover не для каких элементов кроме ссылок.

Тоесть a:hover и капес. В то время как другие браузеры (в том числе и IE7) работают нормально и с другими элементами.
03.06.2008, 12:16
hostingpad

m1kola, проблема решается джаваскриптом. На сайте лебедева можно найти пример.
Да, кстати, уже достаточно долго существует проект называется_не_помню_как, который разрабатывает джаваскрипт (и последние версии очень даже удачны), заставляющий все браузеры ie обрабатывать код так, как если бы его обрабатывал ie7. Конечно, эстеты будут против, но, согласитесь, бывают случаи, когда проблемы совместимости необходимо решать любой кровью.
02.10.2008, 15:35
TecHMeaT
На днях как раз систематизировал хаки в одну кучку:

Internet Explorer 6.0 и ниже
```
/*\*/

* html {}

/**/

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

\\width:100px; - видят только ie 5.0 и ie 5.5 (неактуально)
```
Звездочка. Работает для IE7 и ниже:
```
p { background:red; /* Применимо ко всем браузерам */ *background: green; /* Применимо к IE6 и ниже */ }
```
```
#hack{

color:green; /* IE 5.01 */

color/**/:blue; /* IE 5.5 */

c\olor red; /* IE 6 не работает перед буквами a, b, c, d, e, f */

}
```
```
* 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 и ниже */
```
Условные комментарии

Условие может быть таким: IE – для любой версии IE
lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v
lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же
gte IE v – (greater than or equal) – для IE, версия которых больше или равна v
gt IE v – (greater than) – для IE, версия которых больше v.

Для всех версий IE:
```

```
Для 7-й версии:
```

```
Для 5.01, 5.5 и 6.0:
```

```
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 секции документа:
```
<head>



    <link rel="stylesheet" href="css/opera.css" type="opera/css" media="screen" />



</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 */
```
02.10.2008, 22:34
Webmaster

:0047:
05.10.2008, 22:36
htmlverstka

>IE min-width & max-width: максимальная и минимальная ширина блока:
Жаль, но у меня не работает, смотрел в ИЕ6.

Есть еще хак, работает для всех ИЕ. $свойство.
Например: $margin:100px
06.10.2008, 01:00
Andy Superstar

Как сделать, чтобы лист стилей видела только опера?
06.10.2008, 09:42
Exterior
Цитата:

Сообщение от htmlverstka

Жаль, но у меня не работает, смотрел в ИЕ6.

там ошибочка - перед аргументами пропущено ":"
```
width[B][COLOR="Green"]:[/COLOR][/B] expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto");
```
Цитата:

Сообщение от Andy Superstar

Как сделать, чтобы лист стилей видела только опера?

учитывая, что хак
```
<head>



    <link rel="stylesheet" href="css/opera.css" type="opera/css" media="screen" />



</head>
```
не работает (во всяком случае, в опере 9.52), легко можно реализовать условиями на JS примерно так:
```
if (Opera) document.write('<link rel="stylesheet" href="css/opera.css" type="text/css" />');

else document.write('<link rel="stylesheet" href="css/for_all.css" type="text/css"  />');
```
06.10.2008, 13:03
Andy Superstar

ясно, значит нафиг)
21.10.2008, 13:07
Anami

А под разные версии FF?

Нескромный вопрос, а в связи с уже давним выходом FF3 не появилось ли разных CSS селекторов под 2ой и 3ий фф ? =/
22.10.2008, 08:05
MetSerp

Цитата:

Сообщение от hostingpad

разрабатывает джаваскрипт (и последние версии очень даже удачны), заставляющий все браузеры ie обрабатывать код так, как если бы его обрабатывал ie7.

А есть скрипт сам или ссылка на него? У меня как вспоминаю про ie муражки по коже.:0023: Что бы не верстал но обязательно потом мучаюсь с ним :1131:
22.10.2008, 15:29
Exterior
Цитата:

Сообщение от Anami

в связи с уже давним выходом FF3 не появилось ли разных CSS селекторов под 2ой и 3ий фф ?

Pseudo-elements and pseudo-classes
```
:-moz-tree-row(hover) [B](New in Firefox 3)[/B]

:-moz-tree-cell-text(hover) [B](New in Firefox 3)[/B]

:-moz-system-metric(windows-default-theme) [B](New in Firefox 3)[/B]

:-moz-system-metric(mac-graphite-theme) [B](New in Firefox 3.1)[/B]

:-moz-system-metric(images-in-menus) [B](New in Firefox 3)[/B]

:-moz-system-metric(scrollbar-start-backward) [B](New in Firefox 3)[/B]

:-moz-system-metric(scrollbar-start-forward) [B](New in Firefox 3)[/B]

:-moz-system-metric(scrollbar-end-backward) [B](New in Firefox 3)[/B]

:-moz-system-metric(scrollbar-end-forward) [B](New in Firefox 3)[/B]

:-moz-system-metric(scrollbar-thumb-proportional) [B](New in Firefox 3)[/B]

:-moz-alt-text [B](New in Firefox 3)[/B]

:-moz-placeholder [B](New in Firefox 3)[/B]

:-moz-broken [B](New in Firefox 3)[/B]
```
Properties
```
-moz-border-image [B](New in Firefox 3.1)[/B]

-moz-box-shadow [B](New in Firefox 3.1)[/B]

-moz-window-shadow [B](New in Firefox 3.1)[/B]
```
CSS3 Columns
```
-moz-column-rule [B](New in Firefox 3.1)[/B]

-moz-column-rule-width [B](New in Firefox 3.1)[/B]

-moz-column-rule-style [B](New in Firefox 3.1)[/B]

-moz-column-rule-color [B](New in Firefox 3.1)[/B]
```
CSS transforms
```
-moz-transform [B](New in Firefox 3.1)[/B]

-moz-transform-origin [B](New in Firefox 3.1)[/B]

-moz-stack-sizing [B](New in Firefox 3.1)[/B]
```
Values
For all properties accepting color keywords
```
-moz-mac-chrome-active [B](New in Firefox 3.1)[/B]

-moz-mac-chrome-inactive [B](New in Firefox 3.1)[/B]

-moz-win-communicationstext [B](New in Firefox 3)[/B]

-moz-win-mediatext [B](New in Firefox 3)[/B]

-moz-nativehyperlinktext [B](New in Firefox 3.1)[/B]
```
width , min-width , max-width
```
-moz-min-content [B](New in Firefox 3)[/B]

-moz-fit-content [B](New in Firefox 3)[/B]

-moz-max-content [B](New in Firefox 3)[/B]

-moz-available [B](New in Firefox 3)[/B]
```
-moz-appearance
```
-moz-win-browsertabbar-toolbox [B](New in Firefox 3)[/B]

-moz-win-communications-toolbox [B](New in Firefox 3)[/B]

-moz-win-media-toolbox [B](New in Firefox 3)[/B]

-moz-mac-unified-toolbar [B](New in Firefox 3.1)[/B]
```
31.10.2008, 10:43
kisenish

Подскажите кто-нибудь, как сделать так, чтобы min-width работало в 6 эксплорере
31.10.2008, 10:54
Exterior
kisenish,
```

```
минимальная ширина для IE6, 5.5, 5.0 будет установлена в 1000px
31.10.2008, 11:07
kisenish

спасибо большое!!!!
25.12.2009, 18:39
locky-yotun

Вот кстати очень хорошая подборка на тему топика – Расширенный сборник CSS-хаков
22.03.2010, 15:09
Alik1910

а кто подскажет как сделать чтобы дивы в мазилле и опере отображались одинаково?
25.03.2010, 13:45
Sikha

Появилась маленькая просьба в ходе чтения темы!
подписывайте хаки пожалуйста чтобы люди имели ввиду за что какой хак отвечает!
25.03.2010, 15:10
Alcorn
min-width для ie6:
```
width:expression(document.getElementById('элемент').offsetWidth<981?'980px':'auto');
```
где вместо 981 и 980 подставляете свои размеры. Первый параметр должен быть обязательно больше второго, хотя бы на 1px, иначе ie6 при resize войдёт в бесконечный цикл.
04.07.2010, 19:06
antoha1998

:1121: Как всегда не успеваю отвечать!!!
04.07.2010, 19:26
ottaviano

ну так и не отвечай, зачем по твоему это сообщение

Цитата:

Сообщение от antoha1998

Как всегда не успеваю отвечать!!!

в этой теме? флюд называется
17.05.2011, 07:10
Эльвина
Решение для hover ie6
пишем в head
```

```
далее скопируйте и вставьте в файл hover.htc
```
<attach for=element event=onmouseover handler=topm>

<attach for=element event=onmouseout handler=verm>

<script>

  function topm(){element.className='hover';}

  function verm(){element.className='';}

</script>
```
17.05.2011, 07:30
Эльвина

решение для минимальной ширины или высоты в ie6

вставляем в элемент которому нужно задать минимальную высоту или ширину однопиксельную прозрачную картинку gif, соответсвенно нужной минимальной ширины или высоты.
Плюс-валидный код, минус-не семантично
05.10.2011, 15:00
Сергей Шолохов

http://divhack.com/node/3
css хаки для всех браузеров и операционных систем, так же мобильных телефонов и планшетов.
Всё сам проверил, всё работает. Собирал долго.
Особенно порадовало что наконец-то можно для macintosh давать отдельные стили, а то сидишь пилишь под ие, потом приходит директор и говорит, что у него на маке отображается по другому.
21.01.2015, 15:35
chek

[QUOTE=Сергей Шолохов;127392]
Спасибо! хорошая подборка.
02.07.2017, 11:28
Scream93

Ссылка не рабочая. Возможно перезалить хаки?