Os problemas de compatibilidade do IE6 devem ser considerados no layout da página da web

A figura a seguir mostra a taxa de visualização do navegador nos detalhes do visitante no sistema de estatísticas do site, e o IE6 representa mais de 40%. Embora existam muitos tipos de navegadores, o IE sozinho tem muitas versões como IE5.5, IE6, IE7, IE8, etc. Entre essas muitas versões de ponta, o IE6 ainda é amado pela maioria dos usuários; portanto, ao digitar, o IE6 não é considerado o problema de compatibilidade do IE6, caso contrário, perde muitos visitantes.

Aqui estão 10 questões que devem receber atenção no IE6:

Você precisa adicionar o tipo Doctype na parte superior da página HTML. Obviamente, vale a pena recomendar a versão estrita, por exemplo:

<!

http://www.w3.org/tr/html4/strict.dtd>

Ou, XHTML Page! Doctype:

<!

http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>

A última coisa que você quer ver é que o IE6 entra no modo Quirk - na verdade, existem peculiaridades suficientes.

Posição de configuração: O relativo resolve mais de um problema, especialmente ao definir o alinhamento. Obviamente, uma coisa que você precisa entender é que o posicionamento absoluto é relativamente falando. Talvez, porque você não tem uma configuração e não sabe que tudo voou para lá. Por exemplo, se você projetar cada artigo, há uma imagem antes e, finalmente, você descobrirá que há apenas uma foto na página, talvez elas se sobreponham.

Isso se origina do famoso Bug de margem dupla do IE6. Por exemplo, se você projetar flutuar para uma divisão e definir margem-esquerda: 5px;, é provável que seja margem-esquerda: 10px no IE6. Aqui, defina exibição: embutida para elementos flutuantes para resolver o problema.

Muitos problemas do IE6 (ou IE7) podem ser resolvidos definindo o valor do HasLayout. (Se você não sabe o que é HasLayout, veja aqui)

A maneira mais fácil de definir um valor HasLayout para um elemento é adicionar a altura ou largura do CSS (é claro, o zoom também pode ser usado, mas isso não faz parte do CSS). Definir um valor específico é recomendado, mas às vezes não significa necessariamente que a altura é. Aqui, você pode usar a altura: 1%. Se o elemento pai não definir a altura, a altura física do elemento não mudará, mas já possui a propriedade Haslayout.

Um layout complexo pode fazer com que algum texto dentro dos elementos flutuantes apareça abaixo da posição flutuante da limpeza. Este é um problema estranho, e o seguinte pode ajudá -lo a resolvê -lo:

• Verifique se a exibição: Inline está definido como o elemento flutuante;

• Use a direita da margem: -3px em elementos flutuantes;

• Adicione um comentário do IE após o último elemento do elemento flutuante, por exemplo: <!-[se! Ie]> Deixe seu comentário aqui ... <! [Endif]->>

• Adicione uma div ao último elemento (é para definir a largura para 90% ou outra altura semelhante)

ATUALIZAÇÃO: A maneira mais fácil é excluir todos os comentários. (Graças a Tian Wei'er por sua dica, não a encontrei, mas depois de pesquisar no Google, descobri que esse método também pode ser resolvido, e esse é um método recomendado.)

Você pode conferir mais explicações sobre isso em posicionismo, tudo.net.

6. Use apenas o mouse na tag <a>, ie6 suporta apenas a tag <a> para exibir o estilo pairar

Obviamente, você ainda pode resolver esse método através de JS. No entanto, trata -se de acessibilidade. Recomenda -se não definir conteúdo importante no Hover implementado usando JS.

Por exemplo, a altura min-alveração pode evitar o uso de CSS para obter compatibilidade com o IE.

#Element {

Min-altura: 20em;

Altura: Auto! IMPORTANTE;

Altura: 20em; /* Vamos IE6 exibir esta altura*/

}

O IE6 não consegue identificar corretamente a altura min. Você pode definir uma altura fixa para permitir que o IE6 resolva para 20em. Mesmo assim, isso mudará sua altura devido ao tamanho do conteúdo. Outra maneira é usar seletores avançados:

#Element {

Min-altura: 20em;

Altura: 20em;

}

/ * Ignore IE6 */

#Element [id] {

Altura: Auto;

}

A escala confundirá o IE6, a menos que você adicione uma altura exata ao elemento pai. Caso contrário, adicione! Importante aos outros, por exemplo:

corpo{

margem: 2% 0! IMPORTANTE;

margem: 20px 0; /* Ie6 legível*/

}

Não se esqueça de testar cedo e testar com frequência, a menos que seu nível seja concluído. Caso contrário, você pode gastar mais tempo resolvendo problemas do IE6. De um modo geral, se o seu site puder ter um bom desempenho no IE6 e no Firefox, estima -se que outros navegadores não tenham problemas importantes.

Em muitos casos, resolver um problema pode levar mais tempo do que refatorar seu código.