Acredito que todos estão relativamente familiarizados com o tratamento de BUGs CSS comuns, como: IE6 Three Pixel Gap, IE5/6 Doubled Float-Margin Bug, etc. Mas muitas vezes encontramos problemas complexos de BUG CSS. O chamado "complexo" significa essencialmente que as condições de acionamento são muito complicadas, e "BUG" não significa necessariamente que seja um BUG do navegador. Para esse tipo de problema, a primeira coisa que precisamos resolver é como localizar o problema. Somente localizando rapidamente o problema poderemos resolvê-lo melhor.
Para um posicionamento rápido, minha experiência pessoal é geralmente a seguinte(
pode basicamente localizar mais de 90% dos problemas complexos de BUG CSS que encontrei no Taobao):
1. Verifique se o rótulo da página está fechado.
isso pode causar problemas para você. O problema do CSS BUG que não foi resolvido todos os dias, mas só decorre disso. Afinal, os modelos de página geralmente são aninhados pelos desenvolvedores e podem facilmente causar esses problemas.
Dica rápida: Você pode usar o Dreamweaver para abrir o arquivo para verificação. Geralmente, se não houver tags fechadas, elas serão destacadas com um fundo amarelo.
2. Método de exclusão de estilo:
algumas páginas complexas podem carregar N arquivos CSS de link externo e, em seguida, excluir os arquivos CSS um por um, encontrar os arquivos CSS específicos acionados pelo BUG e restringir o escopo do bloqueio.
Para o arquivo de estilo CSS problemático que acabou de ser bloqueado, exclua as definições de estilo específicas linha por linha, localize a definição de estilo de gatilho específica e até mesmo os atributos de estilo de gatilho específicos.
3. Método de confirmação do módulo
Às vezes também podemos começar pelos elementos HTML da página. Exclua diferentes módulos HTML da página e encontre o módulo HTML que desencadeia o problema.
4. Verifique se os carros alegóricos estão limpos.
Na verdade, existem muitos problemas de BUG de CSS causados pela não limpeza dos carros alegóricos. É necessário desenvolver um bom hábito de limpar carros alegóricos. Recomenda-se usar um método de limpeza de carros alegóricos sem tags HTML adicionais (tente evitar usar métodos semelhantes como overflow:hidden;zoom:1 para limpar carros alegóricos, que serão muito restritivos). ).
5. Verifique se o haslayout é acionado no IE.
Muitos BUGs CSS complexos no IE estão intimamente relacionados ao haslayout exclusivo do IE. Estar familiarizado e compreender o haslayout obterá o dobro do resultado com metade do esforço para lidar com bugs complexos de CSS. Recomenda-se ler "On have layout" traduzido por old9 (se você não consegue cruzar o ótimo GFW, você pode ler o repost no azul)
Dica rápida: Se o haslayout for acionado, as propriedades na ferramenta de depuração do IE Barra de ferramentas do desenvolvedor do IE será exibido e o valor do layout é -1.
6. O método de depuração de borda e fundo,
como o nome sugere, consiste em definir uma borda ou fundo visível (geralmente preto ou vermelho) para o elemento a ser depurado. Este método é um dos métodos mais comumente usados para depuração de BUGs CSS e ainda é aplicável a BUGs complexos. Acessível e ecologicamente correto ^^
A última coisa que quero enfatizar a todos é que desenvolver bons hábitos de escrita, reduzir tags extras, tentar ser semântico e cumprir os padrões pode, na verdade, nos poupar de muitos BUGs CSS extra complexos. , é que criamos problemas para nós mesmos. Espero que todos fiquem longe dos insetos e vivam uma vida cada vez melhor.