Dicas comuns de compatibilidade CSS
Por favor, tente escrever o código no formato xhtml, e DOCTYPE afeta o processamento CSS. Como padrão W3C, uma instrução DOCTYPE deve ser adicionada.
1.Problema de centralização vertical de div
vertical-align:middle; Aumente o espaçamento entre linhas para a mesma altura de todo o DIV line-height:200px; A desvantagem é que você precisa controlar o conteúdo e não envolvê-lo em outra linha.
2. O problema da duplicação da margem
A margem definida para um div definido como flutuante será duplicada no IE. Este é um bug que existe no IE6. A solução é adicionar display:inline dentro desta div.
Por exemplo:
<#div id=”imfloat”>
O CSS correspondente é #imfloat{
flutuar:esquerda;
margin:5px;/*No IE, é entendido como 10px*/
display:inline;/*No IE, será entendido como 5px*/}
3. Distância dupla gerada pela flutuação, ou seja
#box{ float:left; width:100px; margin:0 0 0 100px; //Neste caso, o IE irá gerar uma distância de 200px display:inline;
Vamos falar detalhadamente sobre os dois elementos bloco e inline: A característica do elemento bloco é que ele sempre começa em uma nova linha, e a altura, largura, altura da linha e margens podem ser controladas (elemento bloco a característica); do elemento inline é isso, e outros Os elementos estão na mesma linha e não podem ser controlados (elementos inline);
#box{ display:block; //Você pode simular elementos inline como elementos de bloco display:inline //Obter o efeito de organizar na mesma linha diplay:table;
4 problemas do IE com largura e altura
O IE não reconhece a definição de min-, mas na verdade trata a largura e a altura normais como se houvesse um min. Este é um grande problema. Se você usar apenas largura e altura, esses dois valores não serão alterados em um navegador normal. Se você usar apenas largura e altura mínima, a largura e a altura não serão definidas. sob o IE.
Por exemplo, se você deseja definir uma imagem de fundo, esta largura é mais importante. Para resolver esse problema, você pode fazer o seguinte:
#box{ largura: 80px; altura: 35px;}html>corpo #box{ largura: automático; largura mínima: 80px;
5. Largura mínima da página
min-width é um comando CSS muito conveniente. Ele pode especificar que a largura mínima de um elemento não pode ser menor que uma determinada largura, para que o layout possa estar sempre correto. Mas o IE não reconhece isso e, na verdade, trata a largura como a largura mínima. Para tornar este comando também disponível no IE, você pode colocar um
#container{ largura mínima: 600px; largura:exPRession(document.body.clientWidth < 600? "600px": "auto" );}
A primeira largura mínima é normal; mas a largura da segunda linha usa javascript, que só é reconhecido pelo IE, o que também tornará seu documento HTML menos formal. Na verdade, ele implementa a largura mínima por meio do julgamento de Javascript.
6. O texto DIV flutuante do IE produz um bug de 3 pixels
O objeto à esquerda flutua e o da direita é posicionado usando a margem esquerda do patch externo. O texto dentro do objeto à direita será espaçado 3px da esquerda.
#caixa{ float:esquerda;largura:800px;}
#esquerda{ float:esquerda;largura:50%;}
#direita{largura:50%;}
*html #left{ margin-right:-3px; //Esta frase é a chave}
Quando o aplicativo div é complexo, há alguns links em cada coluna e problemas de esconde-esconde podem ocorrer facilmente em DIVs.
Algum conteúdo não pode ser exibido Quando o mouse seleciona esta área, verifica-se que o conteúdo está realmente na página. Solução: use o atributo line-height para #layout ou use altura e largura fixas para #layout. Mantenha a estrutura da página o mais simples possível.
8. Float div está fechado; altura adaptativa;
①Por exemplo: <#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >O NOTfloatC aqui não deseja continuar a tradução, mas deseja ser organizado para baixo. (As propriedades de floatA e floatB foram definidas como float:left;)
Este código funciona bem no IE, o problema está no FF. A razão é que NOTfloatC não é um rótulo flutuante e o rótulo flutuante deve ser fechado. Adicione <#div class="clear"> entre <#div class="floatB"> <#div class="NOTfloatC">. Esta div deve prestar atenção à sua posição, e deve ser igual às duas divs com. atributos float. Não pode haver um relacionamento aninhado entre os níveis, caso contrário ocorrerá uma exceção. E defina o estilo clear da seguinte forma: .clear{ clear:both;}
② Não defina a altura do div como um wrapper externo. Para permitir que a altura se adapte automaticamente, adicione overflow:hidden no wrapper; vez, o IE deve ser acionado. O atributo privado do layout (o malvado IE!) pode ser feito usando zoom:1;, obtendo assim compatibilidade.
Por exemplo, um wrapper é definido da seguinte forma:
.colwrapper{ overflow:oculto;zoom:1;margem:5px automático;}
③Para composição tipográfica, a descrição CSS que mais usamos é provavelmente float:left Às vezes, precisamos criar um plano de fundo unificado atrás do float div na coluna n, por exemplo:
Por exemplo, queremos definir o fundo da página como azul para que a cor de fundo de todas as três colunas seja azul. No entanto, descobriremos que à medida que o centro esquerdo se estende para baixo, a página na verdade mantém a mesma altura. surge. A razão é que a página não é um atributo flutuante e nossa página não pode ser configurada para flutuar porque precisa ser centralizada, então devemos resolvê-la assim.
A solução é incorporar um DIV flutuante à esquerda com largura de 100%.
④Fechamento flutuante universal (muito importante!)
Para o princípio do clear float, consulte [Como limpar floats sem marcação estrutural]. Adicione o seguinte código ao CSS global e adicione class="clearfix" ao div que precisa ser fechado sempre.
/* Limpar correção */
.clearfix:after {conteúdo:"."; display:block height:0;
.clearfix {display: bloco embutido};
/* Ocultar do IE Mac */
.clearfix {display: bloco;}
/* Terminar ocultar do IE Mac */
/* fim do clearfix */
Ou defina-o assim: .hackbox{ display:table //Exibe o objeto como uma tabela em nível de elemento de bloco}
9. A altura não pode ser ajustada
A altura não adaptável significa que a altura externa não pode ser ajustada automaticamente quando a altura do objeto interno muda, especialmente quando o objeto interno usa margem ou paddign.
exemplo:
#box {cor de fundo:#eee }
#box p {margem superior: 20px; margem inferior: 20px;
Conteúdo no objeto p
Solução: adicione dois objetos div vazios acima e abaixo do código CSS do objeto P: .1{height:0px;overflow:hidden;} ou adicione o atributo border ao DIV.
10.Por que há lacunas nas imagens do IE6?
Existem muitas técnicas para resolver este BUG. Você pode alterar o layout do html, ou definir o img para display:block ou definir o atributo vertical-align para vertical-align:top.
bottom middle text-bottom tudo pode ser resolvido.
11. Como alinhar o texto com a caixa de entrada de texto
Adicione vertical-align:middle;