Dicas de compatibilidade CSS (IE e Firefox)

A compatibilidade do CSS com navegadores às vezes dá dor de cabeça às pessoas. Talvez quando você entender as técnicas e princípios, eu coletei as dicas de compatibilidade para IE7, 6 e Fireofx da Internet e as classifiquei. Para a transição para web2.0, 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.

Dicas de CSS

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