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 <div> sob a tag <body>, especificar uma classe para o div e projetar o CSS assim:
#container{ largura mínima: 600px; largura:expressão(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.