div.Field input[type="text"]
{
color: blue;
}
Assim, temos que circundar o problema, e a solução mais comum, é adicionar uma class específica para o caso que queremos resolver, e atribuir a class ao elemento respectivo, por exemplo:
div.Field input.Text /* IE6 Does NOT support attribute selector */
{
color: blue;
}
Passamos então a representar o conteudo da seguinte forma:
<div class="Field">
<label for="Name">Nome</label>:<input class="Text" type="text" id="Name" value="">
</div>
Mas numa perspectiva futura, podemos querer suportar ambas as regras, com algo como o seguinte:
div.Field input[type="text"],
div.Field input.Text /* IE6 Does NOT support attribute selector */
{
color: blue;
}
Perfeitamente válido ! Certo ?
Sim, é perfeitamente válido segundo o standard; Mas não, não funciona no IE6!
E de nada vale trocar a ordem das regras, dado que o comportamento é exactamente o mesmo.
O problema é devido ao IE6 rejeitar as regras que não suporta, conjuntamente com qualquer outra que lhe esteja associada.
Para resolver o problema temos que duplicar as formatações, de forma a que a rejeição da regra não suportada, não afecte as restantes, ou seja:
div.Field input[type="text"]
{
color: blue;
}
div.Field input.Text /* IE6 Does NOT support attribute selector */
{
color: blue;
}
Saber isto pode poupar-vos muito tempo :)
Sem comentários:
Enviar um comentário