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

Хаки для браузеров
* IE6 and below *
* html #uno { color: red }


* IE7 *
*:first-child+html #dos { color: red }


* IE7, FF, Saf, Opera *
html>body #tres { color: red }


* IE8, FF, Saf, Opera (Everything but IE 6,7) *
html>/**/body #cuatro { color: red }


* Opera 9.27 and below, safari 2 *
html:first-child #cinco { color: red }


* Safari 2-3 *
html[xmlns*=""] body:last-child #seis { color: red }


* safari 3+, chrome 1+, opera9+, ff 3.5+ *
body:nth-of-type(1) #siete { color: red }


* safari 3+, chrome 1+, opera9+, ff 3.5+ *
body:first-of-type #ocho { color: red }


* saf3+, chrome1+ *
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}


* iPhone / mobile webkit *
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}


* Safari 2 - 3.1 *
html[xmlns*=""]:root #trece { color: red }


* Safari 2 - 3.1, Opera 9.25 *
*|html[xmlns*=""] #catorce { color: red }


* Everything but IE6-8 *
:root *> #quince { color: red }


* IE7 *
*+html #dieciocho { color: red }


* Firefox only. 1+ *
#veinticuatro, x:-moz-any-link { color: red }


* Firefox 3.0+ *
#veinticinco, x:-moz-any-link, x:default { color: red }


***** Attribute Hacks ******


* IE6 *
#once { _color: blue }


* IE6, IE7 *
#doce { *color: blue; * or #color: blue * }


* Everything but IE6 *
#diecisiete { color/**/: blue }


* IE6, IE7, IE8 *
#diecinueve { color: blue\9; }


* IE7, IE8 *
#veinte { color/*\**/: blue\9; }


* IE6, IE7 -- acts as an !important *
#veintesiete { color: blue !ie; } * string after ! can be anything *

/* IE8 */ #anotherone {color: blue\0/;} * must go at the END of all rules *

Максимальный и минимальные высоты и широты для ИЕ

Максимальная высота

/* для ИЕ */
div.max-height {
height: expression(document.body.clientHeight > 1000px ? "1000px" : "auto");
}
/* для нормальных браузеров */
div.max-height {
max-height: 1000px;
}

Минимальная высота

/* для ИЕ */
div.min-height {
width: expression(document.body.clientHeight < 600px ? "600px" : "auto"); }

/* для нормальных браузеров */
div.min-height {
min-height: 600px;
}


Максимальная ширина

/* для ИЕ */
div.max-width {
width: expression(document.body.clientWidth > 1200px ? "1200px" : "auto");
}
/* для нормальных браузеров */
div.max-width {
max-width: 1200px;
}

Минимальная ширина

/* для ИЕ */
div.min-width {
width: expression(document.body.clientWidth < 980px ? "980px" : "auto");
}
/* для нормальных браузеров */
div.min-width {
min-width: 980px;
}

Fix IE6 (нечётный пиксель...)

Это когда блок имеет ширину , в нечётное количество пикселей, Ослик считает что 100% ширины это должно быть чётное количество пикселей, и потому возникает отступ в один пиксель.
Как бороться с этим? да просто :) видел в интернете вариант с експрешенами(не валидное создание майкрософта), есть вариант проще:

папа-блок с шириной допустим - 251px, а в нем блок с класом block.
.block{
width: 20px;
position: absolute;
margin-left: 100%;
left: -20px;(ширина блока)
}

а если бы дать просто right: 0;, то был бы чудесный однопиксельный отступ справа :)

position: fixed в IE6 и ниже...

Вот такой хак с помощью експрешенов, блок прижат к середине экрана, и зафиксированный:

.fixed_block {
position: absolute;
top: expression(parseInt(document.documentElement.scrollTop, 0) + "px");
left: 50%;
margin-left: -100px; /*если блока ширина 200px;*/
}

а это что бы при прокрутке, не дергалась страничка

body {
background: url(images/bg.jpg) fixed;
}

если в макете, нету картинки на бекграунд пишем так:

body {
background:url(about:blank) fixed;
}

P.S. ещё нашел такой вариант експрешена:

top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');