Produção de páginas da Web: resumo de 10 erros comuns de DIV+CSS
Autor：Eve Cole
Data da Última Atualização：2009-06-12 17:53:00
1. Verifique se há erros ortográficos nos elementos HTML e se a tag de fechamento foi esquecida.
Mesmo usuários experientes muitas vezes erram no aninhamento de divs. Você pode usar a função de verificação do Dreamweaver para verificar erros.
2. Verifique se o CSS está correto
Verifique se há erros ortográficos, esqueci } no final, etc. Você pode usar CleanCSS para verificar se há erros ortográficos no CSS. CleanCSS é uma ferramenta para reduzir o peso do CSS, mas também pode verificar erros ortográficos.
3. Determine onde ocorreu o erro
Se o erro afetar o layout geral, você pode excluir os blocos div um por um até que a exibição retorne ao normal após a exclusão de um determinado bloco div e determinar onde ocorreu o erro.
4. Use o atributo border para determinar as características de layout do elemento de erro
Usar o layout do atributo float pode causar erros se você não tomar cuidado. Neste momento, adicione o atributo border ao elemento para determinar o limite do elemento e a causa do erro será revelada.
5. O elemento pai de um elemento float não pode especificar o atributo clear.
No MacIE, se você usar o atributo clear no elemento pai de um elemento float, o layout dos elementos float circundantes será caótico. Este é um bug famoso do MacIE. Se você não conhece, fará desvios.
6. O elemento float deve especificar o atributo de largura
Muitos navegadores apresentam bugs ao exibir elementos flutuantes com largura não especificada. Portanto, independentemente do conteúdo do elemento float, o atributo width deve ser especificado para ele.
Além disso, tente usar em em vez de px como unidade ao especificar elementos.
7. Os elementos flutuantes não podem especificar atributos como margem e preenchimento.
O IE tem um bug ao exibir elementos flutuantes com margem e preenchimento especificados. Portanto, não especifique atributos de margem e preenchimento em elementos float (você pode aninhar uma div dentro do elemento float para definir margem e preenchimento). Você também pode usar hacks para especificar valores extraordinários para o IE.
8. A soma das larguras dos elementos flutuantes deve ser inferior a 100%
Se a soma das larguras dos elementos flutuantes for exatamente 100%, alguns navegadores antigos não os exibirão corretamente. Portanto, certifique-se de que a soma das larguras seja inferior a 99%.
9. Você redefiniu o estilo padrão?
Alguns atributos, como margem, preenchimento, etc., serão interpretados de forma diferente por diferentes navegadores. Portanto, é melhor definir todas as margens e preenchimento como 0, estilo de lista como nenhum, etc. antes do desenvolvimento.
10. Você esqueceu de escrever uma DTD?
Se os resultados de exibição de diferentes navegadores ainda forem diferentes, não importa como você os ajusta, você pode verificar se esqueceu de escrever a seguinte linha de DTD no início da página:
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd "＞
