Nós ficamos mal acostumados com o Internet Explorer 6… Digo isso por que tinhamos tantos problemas e limitações no tempo em que precisávamos suportá-lo, que até hoje nos privamos de algumas técnicas e propriedades do CSS que funcionam plenamente no IE8 e nos IEs mais novos. Quero confessar que eu estava até esses dias eu era prisioneiro da sombra do IE6.
Por isso, aqui vão algumas dicas de propriedades que você já deve conhecer, mas que não usa ainda por que acha que todos os IEs são iguais ao maldito IE6.
:after
Você deve usar alguma técnica de clearfix que você criou ou que você pegou de algum lugar. Eu usava muito jquery para criar um elemento vazio dinamicamente no final do elemento que necessita do clearfix para fazê-lo parar de sofrer influência dos floats dos elementos. Essa técnica aqui pode salvar sua vida:
O content pode ser usado para uma série de outras coisas, como por exemplo inserir um ícone, objeto ou até texto depois de um determinado elemento.
Nesse caso o IE7 fica de fora.
first-child
Sim. O First-child funciona no IE7 ou superior. Mas o last-child não. Sem chance.
Isso já acaba com aqueles problemas de alinhamento de elementos em linha, onde você precisa tirar a margin, padding ou border do último (ou o primeiro) elemento para que eles fiquem alinhados corretamente.
Seletores complexos
Olha só que maravilha, o IE7+ já suporta alguns seletores complexos como os descritos abaixo:
<th>
Descrição
</th>
<td>
Seleciona o elemento INPUT com o atributo TYPE cujo valor seja exatamente o valor TEXT
</td>
<td>
Seleciona o elemento <strong>a</strong> que contenha o atributo <strong>type</strong>não importando o valor.
</td>
<td>
Seleciona elementos com atributos cujo seu valor temine com… Por exemplo, você poderia querer selecionar todos os links que apotam para um arquivo .pdf, ou .php etc.
</td>
<td>
Seleciona elementos com o atributos que comecem com… Você pode querer selecionar apenas os links que apontem para um site específico, por exemplo.
</td>
<td>
Seleciona os elementos cujo o atributo tenha um valor que seja separado por espaços. No exemplo acima ele seleciona um link que contenha o atributo title e que em seu valor tenha a palavra “tableless” no meio.
</td>
<td>
Seleciona o elemento <strong>a</strong> cujo o valor do atributo <strong>hreflang</strong> comece com PT. Ou seja valores como “pt-br” serão encontrados.
</td>
<td>
Seleciona o elemento <strong>a</strong> cujo o valor do atributo <strong>href</strong> seja exatamente <b>https://tableless.com.br/</b>.
</td>
<td>
Seleciona os elementos <strong>a</strong> cujo o valor tenha pelo menos uma ocorrência com a palavra “artigo”.
</td>
Todos eles funcionam no IE7 ou superior. Só com estes seletores já economizamos uma penca de código Javascript.
:first-letter e :first-line
Formatar a primeira letra do parágrafo ou a primeira linha. Coisa linda.
word-wrap
Essa propriedade é utilíssima. Você já deve ter escrito uma palavra muito grande ou uma URL, que geralmente não tem espaços, o que ocasionou da string ultrapassar a largura do objeto. A propriedade word-wrap faz com que essas strings muito grandes quebrem de linha assim que atingirem o limite do objeto.
Essa propriedade funciona desde o IE5. O.o
max-height/width e min-height/width
Essas aqui são essências para produzirmos layouts fluidos e responsivos. Funcionam a partir do IE7.
Tabela de referência
O MSDN guarda uma tabela de compatibilidade muito completa com propriedades do CSS que os IEs suportam ou não. Vale a pena dar uma olhada e entender melhor o que você já pode usar nativamente do CSS em vez de sair escrevendo loucamente soluções JQuery.