Como eliminar as diferenças de CSS do IE6 e iE5.x com o ie7.js

O ie7.js é um script muito útil e muito bom, desenvolvido nos últimos 4 anos por Dean Edwards, tem 31 kb e o grande desafio de consertar os bugs de renderização de html e css do ie 5.x e 6.

E o que ele faz realmente?

Adiciona novos seletores :
:hover
:first-child
:last-child
[attr]
[attr=”value”]
[attr~=”value”]
[attr|=”value”]
[attr^=”value”]
[attr$=”value”]
[attr*=”value”]

Altera as propriedades de CSS
background-attachment – > aceitando posicionamento fixo
background-image -> passando a aceitar png alpha
cursor -> ie IE5.x passa a suportar pointer
display -> converte list-item para block no IE5.x
margin -> suporta auto no ie 5.x
adiciona as propriedades max-height, max-width, min-height e min-width

Arruma até o HTML e corrige bugs como o famoso “Doubled Margin” (float: left; margin-left: 10px;)

A descrição completa do que o script faz, com exemplos, está aqui.

Como eu coloco isso no meu site?

Faça download do script clicando aqui.
Insira o seguinte código dentro da tag head:

<!--[if lt IE 7]>
    <script src="js/ie7.js" type="text/javascript"></script>
<![endif]-->

Recomendo o uso desse script para backends, administrativos, pois normalmente para corrigir um bug, o script renderiza a página do jeito comum e só depois aplica o script e isso, nuUm site grande, pode ficar com o conteúdo “dançando” antes de ser completamente carregado.

Já tem uma versão para corrigir os bugs do ie7 também (ie8.js) e pode ser baixada no site do desenvolvedor.

Pseudo classes first-child e last-child cross browser usando css condicional

Pseudo classes first-child e last-child servem para aplicar css no primeiro ou último ítem de uma seletor CSS.
É muito bom usar pra colocar cantos arredondados.

Normalmente as pessoas colocam :

<ul>
	<li class="primeiro"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="ultimo"></li>
</ul>

E depois aplicam css no li.primeiro e no li.ultimo, e quem tem que programar depois server side no server que se vire fazendo ifs.

Isso não é necessário!

Veja no exemplo de First Child, como colocar uma cor diferente no primeiro ítem do menu.

first-child e last-child cross browser usando css condificional

HTML :

<ul>
	<li>Programas Relacionados</li>
	<li>Comentários (4)</li>
	<li>Espalhe este Post</li>
</ul>

CSS :

#tabs ul li{ 

	/* font padrão - preto */
	font-color: #000;

	/* IE - CSS Condicional */
	font-color: expression(this.previousSibling == null ? '#F00' : '#000');

}

/*
	Pra todos os outros browsers é mais simples,
	é só usar o pseudo-classe :first-child
*/
#tabs ul li:first-child{ font-color: #f00; }

Funciona como um operador ternário normal :
Propriedade css : expression(condição ? valor verdadeiro : valor falso )

E se tivesse que escolher o último ítem?
Veja no exemplo, como colocar uma borda somente no último ítem:

#tabs ul li{
	border: 0;
	border: expression(this.nextSibling == null ? '1px solid #000' : '0');
}
#tabs ul li:last-child{ border: 0; }