Há muitos benefícios em usar a estrutura XHTML+CSS, mas de fato existem alguns problemas. Seja devido à inexperiência ou a pensamentos pouco claros, primeiro escreverei alguns dos problemas que encontrei abaixo para evitar que todos procurem.
1. A interpretação do modelo BOX no Mozilla Firefox e no IE é inconsistente, resultando em uma diferença de 2px. Solução:
div{margin:30px!important;margin:28px;}
Observe que a ordem dessas duas margens não deve ser escrita ao contrário, de acordo com Ajie! O atributo importante não é reconhecido pelo IE, mas outros navegadores podem. Portanto, na verdade, é interpretado assim no IE:
Sediv{maring:30px;margin:28px}
for definido repetidamente, o último será executado, então você não pode simplesmente escrever margin:XXpx!important
2. A interpretação BOX de; IE5 e IE6 são inconsistentes no IE5{width:300px;margin:0 10px 0 10px;}A largura do div será interpretada como 300px-10px (preenchimento direito)-10px (preenchimento esquerdo). div é 280px, enquanto a largura no IE6 e outros navegadores é calculada como 300px + 10px (preenchimento direito) + 10px (preenchimento esquerdo) = 320px. Neste momento podemos fazer as seguintes modificações:
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
Não entendi muito bem o que é isso /**/, só sei IE5 e Firefox Ambos são suportados, mas o IE6 não suporta. Se alguém entender, por favor me avise, obrigado! :)
3. A tag ul tem um valor de preenchimento por padrão no Mozilla, mas no IE apenas margin tem um valor, então defini-la primeiro:
ul{margin:0;padding:0;}
pode resolver a maioria dos problemas.
4. Em relação aos scripts, o atributo idioma não é suportado em xhtml1.1. Você só precisa alterar o código para:
É isso.
5. Se você definir as direções de float e text-align no contêiner BOX como iguais:
{float:left;text-align:left;margin:0 0 0 200px;}
podemos fazer as seguintes modificações:
{float :esquerda;alinhamento de texto:esquerda;margem:0 0 0 200px;display:inline;}