A compatibilidade do navegador sempre foi um problema comum no layout CSS, e os iniciantes encontraram muitos mal-entendidos por causa disso. Por meio de minha experiência, resumi dois métodos para evitar a maioria dos problemas de compatibilidade do navegador.
Esses dois métodos têm as seguintes vantagens:
1. Não há necessidade de usar HACK
2. Simples e eficaz, você pode entender rapidamente
3. Layout hierárquico e modular
4. O código é mais razoável e fácil de identificar
Método 1: Resolva o desalinhamento flutuante causado pela adição de espaçamento interno e externo
Geralmente precisamos usar float para flutuar DIVs em layouts de múltiplas colunas. Normalmente escreveremos 3 DIVs para layout de 3 colunas.
.gif)
Para conseguir esse efeito, adicionaremos margem para permitir que a coluna fique diretamente espaçada, e também adicionaremos uma borda, além de preenchimento para evitar que o texto interno grude na borda. Mas algo inesperado aconteceu depois que o código foi escrito, ocorreu a seguinte situação:
.gif)
A terceira coluna ficava abaixo. Este não é o efeito que você deseja. Então vamos analisar isso. Siga a ideia geral. A largura total é 800px, 200px para a coluna da esquerda, 400px para a coluna do meio e 200px para a coluna da direita. Isso parece bom, mas precisa haver um espaço entre essas colunas, então você precisa alterá-lo: 190px para a coluna da direita. coluna esquerda, 400px para a coluna do meio e 190px para a coluna direita.
Mas para melhorar a aparência, você adiciona uma borda. Mas esqueci que a borda também aumentará a largura Além disso, você aumentou o preenchimento da coluna: 10px estou confuso, então a largura real passa a ser: coluna esquerda: largura 200-espaçamento externo 10-espaçamento interno 20-border. 2=168 , para que não haja desalinhamento. Mas você não acha que isso é um pouco complicado? Talvez você precise de uma calculadora. Haverá diferenças na exibição de alguns navegadores com este layout.
Ok, vamos falar sobre meu método. De acordo com a divisão hierárquica, separo o layout e display. O layout significa que além da largura e da flutuação, o layout adiciona no máximo um espaçamento externo, para que seja mais fácil calcular. Em seguida adicionamos outro DIV à coluna de layout especificamente para exibir bordas, espaçamento interno e externo, etc. Não é necessário definir a largura, apenas adaptá-la. Para facilitar a sua lembrança, improvisei um poema: a largura fixa deve ser flutuante, sem bordas ou patches, coloque um DIV dentro, e o estilo definido funcionará!
Método 2: Resolva o problema de elementos flutuantes internos se destacando da camada externa
Para fazer um catálogo de produtos ou álbum de fotos, usamos UL ou N DIVs para flutuar. O efeito desejado é o seguinte:
.gif)
Mas o tiro saiu pela culatra recentemente, a tela se parece com a seguinte e a borda externa mudou para o topo:
.gif)
A solução para este problema é realmente muito simples.
1. Você pode adicionar um float:left à camada externa para resolver o problema.
2. Outro método é colocar um DIV no final para limpar o float após o término do float.
3. Adicione altura ou largura à camada externa.