1. Diferentes interpretações de intérpretes de caixa #box{.
largura:600px; //para ie6.0-
width:500px; //para ff+ie6.0
}
#caixa{
largura:600px!importante //para ff
largura:600px; //para ff+ie6.0
largura: 500px; //para IE6.0-
}
2. Para ocultar css no IE, use o subseletor
html>body #box{ }
3, reconhecido apenas pelo IE
*html #caixa{ }
4. Válido em ie/win, mas oculto em ie/max, use barra invertida
5. Defina o estilo separadamente para ou seja
6. Distância dupla gerada pela flutuação, ou seja
#caixa{
flutuar:esquerda;
largura:100px;
margin:0 0 0 100px; //Neste caso, o IE irá gerar uma distância de 200px;
display:inline; //Ignora flutuadores
}
Vamos falar sobre os dois elementos block e inline em detalhes aqui. As características do elemento Block são: ele sempre começa em uma nova linha e a altura, largura, altura da linha e margens podem ser controladas (elementos de bloco); as características do elemento Inline são: e Outros elementos estão na mesma linha,... não podem ser controlados (elementos inline);
#caixa{
display:block; //Pode simular elementos inline como elementos de bloco
display:inline; //Consegue o efeito de organizar na mesma linha
diplay:table; //para ff, simula o efeito da tabela
}
7, apenas para oprea
@media todos e (largura mínima:0px){
#caixa{ }
}
8. Problemas com IE e 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 será um grande problema se você usar apenas largura e altura,
Esses dois valores não serão alterados em navegadores normais. Se você usar apenas min-width e min-height, isso significa que a largura e a altura não serão definidas no IE.
Por exemplo, se você deseja definir uma imagem de fundo, esta largura é mais importante. Para resolver este problema, você pode fazer o seguinte:
#box{
largura: 80px;
altura: 35px;
}
html>corpo #caixa{
largura: automático;
altura: automático;
largura mínima: 80px;
altura mínima: 35px;
}
9. A largura mínima da página,
min-width, é um comando CSS muito conveniente. Ele pode especificar que a largura mínima do elemento não pode ser inferior a uma determinada largura, de modo a garantir que a composição esteja sempre correta. 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 colocá-lo na tag <body> e então especificar uma classe para o div. O CSS é projetado 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.
O mesmo método também pode ser usado para atingir a largura máxima do IE:
#recipiente
{
largura mínima: 600px;
largura máxima: 1200px;
largura:expressão(document.body.clientWidth < 600? "600px": document.body.clientWidth > 1200? "1200px": "auto";
}
10, flutuação clara
.hackbox{
display:table; //Exibe o objeto como uma tabela em nível de elemento de bloco
}
ou
.hackbox{
claro: ambos;
}
Ou adicione: after (pseudo objeto) para definir o conteúdo que ocorre após o objeto. Geralmente é usado em conjunto com o conteúdo. O IE não suporta este pseudo objeto e não é suportado pelos navegadores Ie, portanto, não afeta o IE/. Navegadores WIN. -------Este é o mais problemático...
#caixa:depois{
contente: ".";
exibição: bloco;
altura: 0;
claro: ambos;
visibilidade: oculta;
}
11. 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{
flutuar:esquerda;
largura:800px;
}
#esquerda{
flutuar:esquerda;
largura:50%;
}
#certo{
largura:50%;
}
*html #esquerda{
margin-right:-3px; //Esta frase é a chave
}
código HTML
12. Seletor de atributos (isso não pode ser considerado compatível, é um bug na ocultação de CSS)
p[id]{}
div[id]{}
está oculto para versões anteriores ao IE6.0 e IE6.0.
Ainda há uma diferença entre seletores de atributos e subseletores usados pelo FF e OPera. O escopo dos subseletores é reduzido na forma. O escopo do dispositivo é relativamente grande. Por exemplo, em p[id], todas as tags p com id são do mesmo estilo.