1. HACK CSS
Os dois métodos a seguir podem resolver quase todos os HACKs atuais
1. !important
Com o suporte do IE7 para !important, o método !important agora é apenas para HACK do IE6 (Preste atenção na escrita. Lembre-se que a posição da declaração precisa. com antecedência.)
2. IE6/IE77 para FireFox
*+html e *html são tags específicas do IE, que não são suportadas. pelo firefox ainda. E *+html É uma tag exclusiva para o IE7
Nota:
*+html HACK para IE7 deve garantir que haja a seguinte instrução no topo do HTML:
http://www.w3.org/TR/html4/loose.dtd ">
2. Fechamento de flutuação universal.
Para o princípio de flutuação transparente, consulte [Como limpar flutuadores sem marcação estrutural].
Adicione o seguinte código a
CSS global e adicioneclass
="clearfix" ao div que precisa ser fechado.
.clearfix
:
after
{
conteúdo:"."
;
display
:
block
height
:
0
;
.clearfix {display: bloco;}
3. Outras dicas de compatibilidade
1. Definir o preenchimento em div em FF fará com que a largura e a altura aumentem, mas o IE não (pode ser resolvido com !important)
2. Centralizar o problema
1). line- A altura é definida com a mesma altura do div atual e, em seguida, vertical-align: middle (Cuidado para não quebrar o conteúdo.)
2). Centralize-o horizontalmente: 0 auto; não onipotente)
3. Se você precisar adicionar conteúdo na tag a Para o estilo superior, você precisa definir display: block; (comum em tags de navegação)
4. A diferença na compreensão de BOX entre FF e IE leva a 2px diferença e problemas como a margem de um div definido para flutuar duplicando no IE
5. A tag ul está em FF. Há estilo de lista e preenchimento por padrão abaixo. 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 um alto grau de adaptabilidade
7. Sobre o cursor manual. . E hand só é aplicável ao IE
1. A maioria dos estilos css para firefox ie6 e ie7
agora são hackeados com !important,
o que
pode ser normal.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 { color: #333;
* html #1
{color
: #666;
. A cor da fonte é #666 no IE6 e #999 no IE7.
2A principal definição de estilo para
centralizar questões no layout css
é a seguinte:body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto }
Descrição:
Primeiro defina TEXT-ALIGN no pai; element: center; Isso significa que o conteúdo do elemento pai está centralizado; esta configuração é suficiente para o IE.
Mas não pode ser centrado no Mozilla. A solução é adicionar "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" ao definir o elemento filho.
Deve-se observar que se você quiser usar este método para centralizar a página inteira, é recomendável não defini-lo. em um Em um DIV, você pode dividir vários divs em sequência,
basta definir MARGIN-RIGHT: auto;MARGIN-LEFT: auto em cada div dividido.
3 Diferentes interpretações do modelo de caixa
#box{ width:600px; //para ie6.0- width:500px; //para ff+ie6.0}
#box{ width:600px!important //para ff width: 600px; //para ff+ie6.0 largura:500px; //para ie6.0-}
4 Distância dupla gerada pela flutuação, ou seja,
#box{ float:left; kind Nessas circunstâncias, o IE irá gerar uma distância de 200px display:inline; //Ignore o float} Vamos
falar sobre os dois elementos block e inline em detalhes. As características do elemento Block são: sempre começar em uma nova linha, altura.
, largura, altura da linha, as margens podem ser controladas(
elementos de bloco); as características dos elementos Inline são: na mesma linha que outros elementos,... não podem ser controladas (elementos inline);
/podem ser elementos inline Simular como um elemento de bloco display:inline; //Obter o efeito de organizar na mesma linha diplay:table
O IE não reconhece a definição de min-, mas na verdade trata a largura e a altura normais como se fosse há 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 este problema, você pode fazer isso:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: min-width: 80px min-height: 35px;}
6; páginas Largura mínima
min-width é um comando CSS muito conveniente. Ele pode especificar que a largura mínima de um elemento não pode ser inferior a uma determinada largura, para garantir que o layout esteja sempre correto. Mas o IE não reconhece isso
e, na verdade, trata a largura como a largura mínima. Para fazer este comando funcionar no IE, você pode colocar um
Em seguida, projete o CSS assim:
#container{ min-width: 600px width; :expression (document.body.clientWidth < 600? "600px": "auto" );}
A primeira largura mínima é normal, mas a largura na linha 2 usa Javascript, que só é reconhecido pelo IE, o que também fará você; O documento HTML não é muito formal. Na verdade, ele implementa a largura mínima por meio do julgamento de Javascript.
Também pode ser escrito diretamente como:
#container{largura mínima:600px; *largura:600px;}
Desta forma, a largura mínima é 600PX independentemente do IE ou FF.
7 Limpe o flutuante
.hackbox{ display:table //Exibe o objeto como uma tabela em nível de elemento de bloco} ou .hackbox{ clear:both;}
ou adicione. : after (Pseudo objeto), define 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 os navegadores IE/WIN. A coisa mais problemática sobre isso... #box:after{ content: "."; block height: 0; visibilidade: oculto;}
8 DIV texto flutuante do IE produz 3 pixels
O objeto à esquerda O lado direitodo bug
está flutuando e o lado direito é posicionado usando a margem esquerda do patch externo. O texto no objeto direito estará a 3px do lado esquerdo
. left{ float:left; width:50 %;}#right{ width:50%;}*html #left{ margin-right:-3px;/Esta frase é a chave}
Código HTML
9 Seletor de atributos (isso não pode ser considerado compatível, é um bug na ocultação de CSS)
p[id ]{}div[id]{}
Isto é para o IE6.0 e versões anteriores ao IE6.0 estão ocultas.
Ainda há uma diferença entre seletores de atributos e subseletores no FF e no OPera. forma, embora o escopo dos seletores de atributos seja relativamente grande, como p Em [id], todas as tags p com ids são do mesmo estilo.
10 Problema de esconde-esconde do IE
Quando o aplicativo div é complexo, existem alguns links. em cada coluna, como DIV Neste momento, o problema de esconde-esconde ocorre facilmente.
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.
11 Não adaptação de altura
A não adaptação de altura significa que a altura da camada externa não pode ser ajustada automaticamente quando a altura do objeto da camada interna muda, especialmente quando o objeto da camada interna usa
margem ou preenchimento.
Exemplo:
Conteúdo no objeto p
CSS: #box {background-color:#eee }
#box p {margin-top: 20px;margin - bottom: 20px; text-align:center; }
Solução: Adicione 2 objetos div vazios acima e abaixo do código CSS: .1{height:0px;overflow:hidden;} ou adicione o atributo border ao DIV.
O método a seguir é um método de análise de outro ângulo:
Métodos de tratamento de BUG do navegador compilados (parte) para amigos que gostam de web design compartilharem:
1. Asterisco*
O IE pode reconhecer *, mas navegadores padrão como o FF não podem reconhecer *.
Exemplo: p { cor:amarelo; *cor:vermelho;}
Semelhantes são
+ sinal de mais
Só o IE explica
p{cor:vermelho; +cor:azul}
IE exibe azul e FF exibe vermelho
2.! importante
O IE6 e versões anteriores irão ignorar este estilo, o IE7 FF irá apoiá-lo;
p{cor:vermelho!importante;cor:amarelo;}
IE7 FF mostrará vermelho IE6 amarelo
Observe aqui que o método !important só é ignorado pelo IE6 e versões anteriores após seguir o formato acima. Outros métodos para aumentar o peso do estilo podem ser usados universalmente.
3. Sublinhado.
IE6 e versões anteriores usarão este estilo, outros serão ignorados.
p{cor:vermelho; _cor:azul}
4. Notas:
p{cor:vermelho};
Este estilo pode ser aplicado e exibido no IE6, mas não será processado no IE5 e versões anteriores, portanto pode ser diferenciado do IE5/6
5. @IMPORTAR:
Use URL em @IMPORT para importar estilos. O uso padrão é colocar o valor na URL entre aspas, como segue @IMPORT URL("newstyle.css"); alcançar Os estilos do IE4 são processados separadamente.
Além disso, existe outro método:
tela @IMPORT URL("noie.css");
Tela é uma opção usada para especificar o tipo de dispositivo, tela é usada para exibição na tela e impressão é usada para exibição do dispositivo de impressão. No entanto, o IE não oferece suporte a esse método e todos os navegadores do IE podem distinguir entre IE e FF.
6. Seletor de atributos: usado para selecionar objetos com atributos específicos
span[class=esquerda]{cor:azul}
span[título]{cor:vermelho;}
O IE6 não oferece suporte, mas funciona bem no FF, portanto o IE e o FF podem ser processados separadamente.
No desenvolvimento real, o IE e o FF geralmente precisam ser processados separadamente. Você pode usar o seguinte código:
#contente{
cor:vermelho;
}
[xmlnx] #content{
cor: azul
}
Acho que esse método é muito prático e é usado com frequência. Recomendo aos amigos. Se precisar de uma explicação mais detalhada, posso postá-lo novamente.
7. Seletor de subobjeto:
span>p{cor:vermelho}
O IE6 também não é compatível e também pode ser usado para distinguir o IE do FF.
8. Método Tantek
#contente{
cor:azul;
família de voz:""}"";
família de voz: herdar;
cor:vermelho;
}
Depois de usar a família de voz no código acima, o seguinte color:red não será analisado pelos navegadores IE5.5 e inferiores. Portanto, a cor do texto aparecerá em vermelho no IE6/7/FF e no IE5.5 e inferiores. aparecerá em azul no navegador;
Além disso, existe outra maneira de lidar com a família de vozes:
#contente{
cor:vermelho;
família de voz:"}"
família de voz: herdar;
cor:azul;
}
Usando este método, o texto nos navegadores IE6 e inferiores e no navegador FF aparecerá em vermelho, enquanto o texto nos navegadores IE5 e inferiores aparecerá em azul!
9. Atributos de escape
p{width:200px;}
IE5.5 e anteriores serão ignorados. Nota: O caractere de barra invertida não pode aparecer antes de 0-9 ou da letra af
10. Comentários condicionais no IE 1. Introdução aos comentários condicionais
Comentários condicionais no IE têm excelente capacidade de distinguir versões do IE de IE e não-IE e são comumente usados em design WEB.
método de hack.
Comentários condicionais só podem ser usados no IE5 e superior.
Se você tiver vários IEs instalados, os comentários condicionais serão baseados na versão mais recente do IE.
A estrutura básica dos comentários condicionais é a mesma dos comentários HTML (). Portanto, outros navegadores além do IE irão tratá-los como comentários comuns e ignorá-los completamente.
O IE usará a condição if para determinar se deve analisar o conteúdo do comentário condicional como o conteúdo normal da página.
2. Atributos de anotação condicional
gt: maior que, selecione a versão condicional ou superior, excluindo a versão condicional
lt: menor que, selecione a versão abaixo da versão condicional, excluindo a versão condicional
gte: maior ou igual, selecione a versão condicional ou superior, incluindo a versão condicional
lte: menor ou igual, selecione a versão abaixo da versão condicional, incluindo a versão condicional
! : Selecione todas as versões, exceto a versão condicional, independentemente de alta ou baixa, como usar comentários condicionais
Preste atenção para substituir o <> no código pelo sinal correspondente de maior ou menor que em inglês.
O código a seguir é um comentário condicional executado em navegadores não-IE
Você não está usando o Internet Explorer
Você está usando o Internet Explorer versão 6 ou um navegador não-IE