Embora possa haver muitos bugs no navegador, isso não significa que haja bugs quando você se sentir diferente. Pode haver muitas razões para o problema, portanto o produtor precisa de certos métodos para solucionar o problema.
É aconselhável escolher um navegador avançado para teste, como Opera 9.2, Firefox 2.0 ou Safari 3.0, que tem melhor suporte para CSS 2.1. Não use o IE 6 como o único navegador de teste, porque o IE 6 tem mais problemas. o que é muito desfavorável para os produtores (especialmente iniciantes) entenderem as especificações do CSS 2.1 e determinarem se o desempenho do navegador está correto.
Se o teste estiver correto em navegadores avançados, mas houver um problema no IE, pode-se basicamente determinar que o problema é o IE.
Se a exibição em navegadores avançados estiver incorreta, você poderá primeiro fazer o seguinte julgamento preliminar:
1. Se a ortografia está correta, você pode usar a verificação W3C ou a função de verificação do software de edição de páginas da web para verificar se as tags no documento (X)HTML correspondem, se a ordem de aninhamento está correta, se as tags vazias estão fechados e se a ortografia do CSS está correta. Aninhamento incorreto e ortografia incorreta são erros muito comuns.
Dica: Existem muitos softwares de edição que podem fornecer funções de verificação de (X)HTML e CSS, incluindo se o navegador suporta atributos CSS, etc. Por exemplo: Dreamweaver 8 ou superior, TopStyle e outros softwares.
Dica: O software complementar "Firebug" no Firefox é uma ferramenta muito útil. Ele pode não apenas verificar se (X)HTML, CSS e JavaScript estão corretos, mas também exibir dinamicamente os frames e as posições dos elementos na página. é muito bom para depurar páginas da web.
2. Existe um DTD adequado?
Em outros capítulos deste livro, a importância do DOCTYPE foi enfatizada mais de uma vez. Diferentes DOCTYPE afetam diretamente a interpretação de (X)HTML e CSS pelo navegador.
3. O navegador suporta atributos CSS Embora os navegadores modernos suportem a maioria das especificações CSS 2.1 e algumas especificações CSS 3, conforme apresentado no capítulo anterior, alguns atributos CSS não têm sido amplamente suportados pelos navegadores, portanto, em Quando um determinado atributo é suportado? não entrar em vigor, confirme se o navegador é compatível.
4. Isole o problema para destacar a área problemática, como adicionar uma borda marcante ou uma cor de fundo ao elemento.
Se adicionar uma borda resolver o problema, então é uma questão de sobreposição de margens.
Se um plano de fundo for adicionado, mas o plano de fundo não for exibido, pode ser devido a recursos especiais ou o elemento flutuante não está fechado.
Tente modificar alguns atributos, especialmente os atributos que acionam o hasLayout do IE, para determinar se é um bug comum no IE.
5. Configure um teste básico Se isso não resolver o problema, você pode copiar o arquivo do problema e excluir o (X)HTML extra, deixando apenas a parte problemática.
Exclua o problema do comentário dentro do (X)HTML e veja se o problema desaparece.
Remova os espaços entre os elementos e veja se o problema desaparece.
Em seguida, comente a folha de estilo em blocos até que o problema desapareça, então o estilo que acabou de ser comentado é o problema.
6. Resolver o problema em vez de resolver o fenômeno. Encontrar a causa raiz do problema e resolvê-lo é o objetivo final, em vez de usar um hack complexo para tornar a página da web "linda" apenas para acomodar o desempenho. Se você não resolver o problema na raiz, poderá encontrar mais problemas quando o navegador for atualizado. Ao mesmo tempo, o Hacking pode causar o surgimento de novos problemas, especialmente acionando ou evitando o acionamento do atributo hasLayout do IE.
Outra maneira de pensar também pode evitar o problema, como cancelar o atributo margin do elemento e definir o atributo padding de seu elemento pai.
Use o Hack apenas quando realmente não puder ser resolvido.