1. "O uso de importante no IE6 e FF"
.box1 {largura: 150px! Importante;}
.box1 {largura:250px;}
!important significa que esta configuração tem prioridade. O IE não cometerá um erro ao encontrar !important e apenas ignorará sua função. Se a largura for definida posteriormente, o IE usará a última largura definida como critério. ele usará o valor atual, que é o valor anterior! Importante. Por exemplo: #test {width: 300px !important}Tanto o IE quanto o FF exibem 300PX. Se houver um valor no final, o IE exibirá o seguinte valor e o FF exibirá o valor com !import na frente!
Outros navegadores consideram isso importante devido à relação de prioridade, a largura previamente definida sempre prevalece.
#test {largura:300px;largura:400px !importante ;}
O resultado exibido nesta frase é que a largura do IE e do FF é 400PX
#test {largura:300px!importante;largura:400px;}
O resultado de exibição desta frase é FF: 300px IE: 400px
Portanto, ao usar !important, coloque as palavras que contêm !important na frente.
Mas o problema volta, o IE7 já consegue reconhecer !important, veja abaixo!
2. Estilos CSS para Firefox IE6 IE7
Hoje em dia, a maioria deles usa !important para hackear. Os testes do Ie6 e do Firefox podem ser exibidos normalmente, mas o IE7 pode interpretar !important corretamente, o que fará com que a página não seja exibida conforme necessário! Encontrei um bom hack para o IE7 usando "*+html". Agora navegue com o IE7 e não deverá haver problemas.
Agora escreva um CSS como este:
#1 { cor: #333 } /* Moz */
* html #1 { cor: #666 } /* IE6 */
*+html #1 { cor: #999 } /* IE7 */
Em seguida, a cor da fonte é exibida como #333 no Firefox, #666 no IE6 e #999 no IE7. Você pode usar "+" para implementar o CSS Hack que só é reconhecido pelo IE. Alguns amigos podem pensar em usar o "_" Hack. , mas eles são diferenciados porque "_" não é reconhecido no IE7. Então use +
Resultados do teste:
Os navegadores IE5.5, IE6 e IE7 podem reconhecê-lo;
Os navegadores FF2.0, Opera 9 e Safari 2 não o reconhecem.
3. Hackear o IE7
O IE7 corrigiu muitos bugs e adicionou suporte para alguns seletores, então agora hacks para ocultar ou exibir o IE, como *html {}, html>body {}, !important, etc., não funcionarão no IE7. Embora o CSS Hack não seja recomendado e os comentários condicionais sejam um filtro infalível, os comentários condicionais só podem aparecer em HTML, então o CSS Hack ainda tem seu lugar. Nanobot descobriu alguns CSS Hacks para IE7, especificamente:
>corpo
HTML*
*+html
Desses três métodos de escrita, os dois primeiros são métodos ilegais de escrita CSS e são ignorados em navegadores compatíveis com os padrões, mas o IE7 não pensa assim. Para >body, ele substituirá o seletor ausente pelo seletor global *, ou seja, será processado em *>body, e esse fenômeno também existe não apenas para o seletor >, mas também para os seletores + e ~. Para html*, como não há espaço entre html e *, também é um erro de sintaxe CSS, mas o IE7 não irá ignorá-lo, mas erroneamente acredita que há um espaço aqui. Para o terceiro tipo *+html, o IE7 acredita que a declaração DTD na frente do html também é um elemento, então o html será selecionado Entre esses três métodos, apenas este método é escrita CSS legal, o que significa que pode passar no validador. A verificação é, portanto, também um uso de hack recomendado pelo autor.
Internet Explorer 6 e inferior
Use *html{} para selecionar o elemento html.
IE 7 e abaixo
Use *+html, * html {} para selecionar o elemento html.
IE 7 apenas
Use *+html {} para selecionar o elemento html.
Apenas IE 7 e navegadores modernos
Use html>body {} para selecionar o elemento body.
Somente navegadores modernos (não IE 7)
Use html>/**/body {} para selecionar o elemento body.
4. IE e FF têm interpretações diferentes do modelo de caixa. Descrição do código: #test { width: 650px !important;width: 648px;padding-left:2px;background:#fff }
A largura de banda exibida pelo teste é 650px
A largura total da caixa IE é: a soma das larguras de largura + preenchimento + borda + margem A largura total da caixa FF é a largura da largura, e a largura do preenchimento + borda + margem está incluída na largura.
Se houver BOX{WIDTH:"300"; PADDING:"5PX";}, a largura da BOX no IE deve ser: 310. A largura do FF é 300, portanto quando o BOX for preenchido, deve-se usar BOX{WIDTH: "290"!IMPORTANT; WIDTH: "300";}, para garantir que a largura do BOX seja sempre 300px, e Não haverá fenômeno de estiramento e em FF não haverá situação em que a camada flutuante não esteja totalmente preenchida.
5. A tag ul tem valor de preenchimento no Mozilla, mas apenas margin tem valor no IE.
Definir ul{margem:0;padding:0}
6. IE não consegue distinguir a diferença entre relação de herança e relação pai-filho. Todas são relações de herança.
7. Definir o preenchimento em um div no FF fará com que a largura e a altura aumentem, mas o IE não (pode ser resolvido com !important).
8. Problema de centralização
1. Centralize verticalmente. Defina line-height para a mesma altura do div atual e, em seguida, passe vertical-align: middle (tenha cuidado para não quebrar o conteúdo).
2. Margem centralizada horizontalmente: 0 automático (claro que não é universal).
3. Se você precisar adicionar estilos ao conteúdo da tag a, será necessário definir display: block;
4. A diferença na compreensão de BOX entre FF e IE leva a uma diferença de 2px e a problemas como a margem de um div definido para flutuar dobrando no IE.\
5. Diferentes desempenhos de UL:
A tag ul tem estilo de lista e preenchimento por padrão no FF. É melhor declará-la com antecedência para evitar problemas desnecessários (comum em tags de navegação e listas de conteúdo).
6. Não defina a altura do div como um wrapper externo. É melhor adicionar overflow: hidden para obter adaptação à altura.
9. Em relação ao cursor manual, ele se aplica apenas ao IE. Se tanto o IE quanto o FF o reconhecerem, use cursor: pointer.