Dicas comuns de compatibilidade CSS
Por favor, 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.
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 fazer este comando funcionar 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:exPRession(document.body.clientWidth < 600? "600px": "auto" );}
A primeira largura mínima é normal; mas a largura na 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.
6. 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{ float:esquerda;largura:800px;}
#esquerda{ float:esquerda;largura:50%;}
#direita{largura:50%;}
*html #left{ margin-right:-3px; //Esta frase é a chave}
<div id="caixa">
<div id="esquerda">＜/div>
<div id="direita">＜/div>
</div>
http://www.devdao.com/
http://yuanma.devdao.com/
7. Problema de esconde-esconde do IE
Quando o aplicativo div é complexo, há alguns links em cada coluna e problemas de esconde-esconde podem ocorrer facilmente em DIVs.
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.
8. Float div está fechado; altura adaptativa;
①Por exemplo: ＜#div id=”floatA” >＜#div id=”floatB” >＜#div id=”NOTfloatC” . (As propriedades de floatA e floatB foram definidas como float:left;)
Este código funciona bem no IE, o problema está no FF. A razão é que NOTfloatC não é um rótulo flutuante e o rótulo flutuante deve ser fechado. Adicione <#div class=”clear”> entre <#div class=”floatB”> <#div class=”NOTfloatC”> Esta div deve prestar atenção à sua posição, e deve ter o atributo float com. os dois Não pode haver um relacionamento aninhado entre divs no mesmo nível, caso contrário ocorrerá uma exceção. E defina o estilo clear da seguinte forma: .clear{ clear:both;}
② Não defina a altura do div como um wrapper externo Para permitir que a altura se adapte automaticamente, adicione overflow: oculto no wrapper; vez, o IE deve ser acionado. O atributo privado do layout (o malvado IE!) pode ser feito usando zoom:1;, obtendo assim compatibilidade.
Por exemplo, um wrapper é definido da seguinte forma:
.colwrapper{ overflow:oculto;zoom:1;margem:5px automático;}
③Para composição tipográfica, a descrição CSS que mais usamos é provavelmente float:left Às vezes, precisamos criar um plano de fundo unificado atrás do float div na coluna n, por exemplo:
<div id=”página”>
<div id=”esquerda”></div>
<div id=”centro”></div>
<div id=”direita”></div>
</div>
Por exemplo, queremos definir o fundo da página como azul para que a cor de fundo de todas as três colunas seja azul. No entanto, descobriremos que à medida que o centro esquerdo se estende para baixo, a página na verdade mantém a mesma altura. surge. A razão é que a página não é um atributo flutuante e nossa página não pode ser configurada para flutuar porque precisa ser centralizada, então devemos resolvê-la assim.
<div id=”página”>
<div id=”bg” estilo=”float:left;largura:100%”>
<div id=”esquerda”></div>
<div id=”centro”></div>
<div id=”direita”></div>
</div>
</div>
A solução é incorporar um DIV flutuante à esquerda com largura de 100%.
④Fechamento flutuante universal (muito importante!)
Para o princípio do clear float, consulte [Como limpar floats sem marcação estrutural]. Adicione o seguinte código ao CSS global e adicione class="clearfix" ao div que precisa ser fechado sempre.
/* Limpar correção */
.clearfix:after {conteúdo:"."; display:block height:0;
.clearfix {display: bloco embutido};
/* Ocultar do IE Mac */
.clearfix {display: bloco;}
/* Terminar ocultar do IE Mac */
/* fim do clearfix */
Ou defina-o assim: .hackbox{ display:table //Exibe o objeto como uma tabela em nível de elemento de bloco}
9． A altura não pode ser ajustada
A altura não adaptável significa que a altura externa não pode ser ajustada automaticamente quando a altura do objeto interno muda, especialmente quando o objeto interno usa margem ou paddign.
exemplo:
#box {cor de fundo:#eee }
#box p {margem superior: 20px; margem inferior: 20px;
<div id="caixa">
<p>Conteúdo no objeto p</p>
</div>
Solução: adicione dois objetos div vazios acima e abaixo do código CSS do objeto P: .1{height:0px;overflow:hidden;} ou adicione o atributo border ao DIV.
10.Por que há lacunas nas imagens do IE6?
Existem muitas técnicas para resolver este BUG. Você pode alterar o layout do html, ou definir o img para display:block ou definir o atributo vertical-align para vertical-align:top.
bottom middle text-bottom tudo pode ser resolvido.
11. Como alinhar texto e caixa de entrada de texto
Adicione vertical-align:middle;
<style type="texto/css">
<!--
entrada {
largura:200px;
altura:30px;
borda: 1px vermelho sólido;
alinhamento vertical: meio;
}
-->
</estilo>
12.Existe alguma diferença entre id e classe definida em padrões web?
(1). Os padrões da Web não permitem IDs repetidos. Por exemplo, div id="aa" não pode ser repetido duas vezes, e class define uma classe, que pode teoricamente ser repetida infinitamente, de modo que as definições que requerem múltiplas referências possam. ser usado ele.
(2). Questão prioritária de atributos
ID tem prioridade maior que classe, veja o exemplo acima
(3) É conveniente para scripts de cliente como JS. Se você quiser executar operações de script em um objeto na página, poderá definir um ID para ele, caso contrário, só poderá encontrá-lo percorrendo os elementos da página e especificando. atributos específicos. Isto é relativamente uma perda de tempo e recursos, mas muito menos simples do que um ID.
13. Dicas para exibir o conteúdo em LI com reticências após exceder o comprimento
Esta técnica é aplicável aos navegadores IE e OP
<style type="texto/css">
<!--
eu {
largura:200px;
espaço em branco:nowrap;
estouro de texto: reticências;
-o-text-overflow: reticências;
estouro: oculto;
}
-->
</estilo>
14. Por que o IE não consegue definir a cor da barra de rolagem de acordo com os padrões da web?
A solução é substituir o corpo por html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="texto/css">
<!--
html {
cor da barra de rolagem:#f6f6f6;
barra de rolagem-cor de destaque:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
barra de rolagem-seta-cor:#000;
barra de rolagem-track-color:#fff;
barra de rolagem-cor da sombra escura:#fff;
}
-->
＜/estilo>
15. Por que não consigo definir um contêiner com altura de cerca de 1px?
Este problema no IE6 é causado pela altura padrão da linha e existem muitas técnicas de solução, como:
estouro: zoom oculto: 0,08 altura da linha: 1px
16. Como fazer a exibição da camada no Flash?
A solução é definir transparência para FLASH
<param name="wmode" value="transparent" />
17. Como centralizar verticalmente uma camada no navegador
Aqui usamos o posicionamento percentual absoluto e a técnica de usar valores negativos fora do patch. O tamanho do valor negativo é sua própria largura e altura dividida por dois.
<style type="texto/css">
<!--
div{
posição:absoluta;
superior:50%;
esquerda:50%;
margem:-100px 0 0 -100px;
largura:200px;
altura:200px;
borda: 1px vermelho sólido;
}
-->
</estilo>
Dicas de compatibilidade CSS para Firefox e IE
1. Problema de centralização de div
O div já está centralizado quando margin-left e margin-right estão definidos como automático. Isso não funciona com o IE, isso significa que o corpo deve ser centralizado. o conteúdo do elemento pai é centralizado.
2. A borda e o fundo do link (uma tag)
Para adicionar uma borda e uma cor de fundo a um link, você precisa definir display: block e float: left para garantir que não haja quebras de linha. Referindo-se à barra de menu, definir a altura de uma barra de menu é para evitar o deslocamento da exibição da borda inferior. Se a altura não for definida, um espaço pode ser inserido na barra de menu.
3. O problema de o estilo hover não aparecer após o acesso ao hiperlink
O estilo de hiperlink que foi clicado e visitado não está mais pairado e ativo. Muitas pessoas devem ter encontrado esse problema. A solução é alterar a ordem dos atributos CSS: LVHA.
Código:
<style type="texto/css">
<!--
a:link {}
a:visitou {}
a: passar o mouse {}
a: ativo {}
-->
</estilo>
4. Cursor do dedo do cursor
cursor: o ponteiro pode exibir o formato do dedo do cursor no IE FF ao mesmo tempo, a mão só pode ser exibida no IE
5. Preenchimento e margem do UL
A tag ul tem um valor de preenchimento por padrão no FF, mas no IE apenas margin tem um valor por padrão, portanto, definir ul{margin:0;padding:0;} primeiro pode resolver a maioria dos problemas.
6. Etiqueta FORMULÁRIO
Este rótulo terá automaticamente algumas margens no IE, enquanto no FF a margem é 0. Portanto, se você quiser exibi-lo de forma consistente, é melhor especificar a margem e o preenchimento em css. Em resposta aos dois problemas acima, meu css In. geral, o estilo ul, form{margin:0;padding:0;} é definido primeiro, então você não terá que se preocupar com isso mais tarde.
7. Problema de inconsistência de explicação do modelo BOX
A interpretação do modelo BOX em FF e IE é inconsistente, resultando em uma diferença de 2px Solução: div{margin:30px!important;margin:28px;} Observe que a ordem das duas margens não deve ser invertida. atributo, mas os navegadores não podem reconhecê-lo. Então, no IE, na verdade, é interpretado assim:
Se div{maring:30px;margin:28px} for definido repetidamente, o último será executado, então você não pode simplesmente escrever margin:xx px!important;#box{ width:600px //for ie6.0- w; idth:500px; //para ff+ie6.0}
#box{ largura:600px!importante //para largura ff:600px; //para largura ff+ie6.0 /**/:500px;
8. Seletor de atributos (isso não pode ser considerado compatível, é um bug na ocultação de CSS)
p[id]{}div[id]{}
Isso está oculto para o IE6.0 e versões anteriores ao IE6.0 e funciona no FF e no Opera. Ainda há uma diferença entre seletores de atributos e subseletores. O escopo dos subseletores é restrito na forma, enquanto o escopo do atributo. seletores são relativamente grandes, como p[id], todas as tags p com id são do mesmo estilo.
9. Os meios mais implacáveis - !importante
Se realmente não houver maneira de resolver alguns problemas detalhados, você pode usar esta técnica. O FF analisará automaticamente "! Importante" primeiro, mas o IE irá ignorá-lo.
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !importante /*Estilo para FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* Estilo para IE */};
Vale ressaltar que a frase xxxx !important deve ser colocada acima de outra frase.
10. Problema de valor padrão de IE e FF
Talvez você esteja reclamando sobre por que precisa escrever CSS diferente especificamente para IE e FF, por que o IE é uma dor de cabeça, e então você está amaldiçoando aquele maldito M$ enquanto escreve CSS. IE. Na verdade, em termos de suporte ao padrão CSS, o IE não é tão ruim quanto pensávamos. A chave é que os valores padrão do IE e FF são diferentes. que é compatível com FF e IE não é tão difícil, talvez para css simples, você não precise do "!important" de jeito nenhum.
Todos nós sabemos que quando um navegador exibe uma página da web, ele decidirá como exibi-la com base na folha de estilo CSS da página da web, mas podemos não necessariamente descrever todos os elementos da folha de estilo em detalhes e, claro, há não há necessidade de fazer isso. Portanto, para as propriedades que não estão descritas, o navegador usará o padrão integrado. forma de exibição, como texto, se você não especificar a cor em css, o navegador usará preto ou cor do sistema para exibir, o fundo de div ou outros elementos, se não for especificado em css, o navegador irá configurá-lo É branco ou transparente e outros estilos indefinidos são iguais. Portanto, a razão fundamental pela qual muitas coisas são exibidas de forma diferente entre FF e IE é que suas exibições padrão são diferentes. Quanto à forma como esse estilo padrão deve ser exibido, sei se existem padrões correspondentes no w3 para estipulá-lo, portanto não há. preciso comentar sobre este ponto.
11. Por que o texto em FF não consegue expandir a altura do contêiner?
Contêineres com valores de altura fixos em navegadores padrão não serão esticados como no IE6. Então, se eu quiser ter uma altura fixa e ser esticado, quais configurações devo fazer? A solução é retirar a altura e definir min-height:200px aqui, para cuidar do IE6 que não conhece min-height, pode ser definido assim:
{
altura:auto!importante;
altura:200px;
altura mínima: 200px;
}
12. Como fazer com que campos longos e contínuos sejam automaticamente agrupados no FireFox
Como todos sabemos, no IE você pode usar Word-wrap:break-word diretamente. No FF, usamos a técnica de inserção JS para resolver o problema.
<style type="texto/css">
<!--
div{
largura:300px;
quebra de linha: quebra de palavra;
borda: 1px vermelho sólido;
}
-->
</estilo>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script type="text/javascript">
/* <![CDATA[ */
função toBreakWord(el, intLen){
var obj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+strConteúdo;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
</script>
13. Por que a largura do contêiner no IE6 é diferente daquela no FF?
A diferença no problema é se a largura total do contêiner inclui a largura da borda. Aqui o IE6 interpreta como 200PX, enquanto o FF interpreta como 220PX. Se você remover o xml da parte superior do contêiner, descobrirá que o problema original está aqui. A instrução na parte superior aciona o modo qurks do IE.
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="texto/css">
<!--
div {
cursor:ponteiro;
largura:200px;
altura:200px;
borda: 10px vermelho sólido
}
-->
</estilo>
<div ōnclick="alert(this.offsetWidth)">Tornar o FireFox compatível com o IE</div>
Existem novos problemas com o suporte do IE7.0 para CSS, que são resolvidos da seguinte forma.
O primeiro tipo, CSS HACK
Bpx; /*Para IE7 e IE6*/
_altura:20px; /*Para IE6*/
Preste atenção ao pedido.
O seguinte também é um HACK CSS, mas não é tão simples quanto o anterior.
#exemplo { cor: #333 } /* Moz */
* html #exemplo { cor: #666 } /* IE6 */
*+html #exemplo { cor: #999 } /* IE7 */
A segunda é usar comentários condicionais específicos do IE
<!--Outros navegadores-->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[se IE 7]>
<!-- Adequado para IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[se lte IE 6]>
<!-- Adequado para IE6 e versões anteriores -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
O terceiro método é o método de filtro CSS. O seguinte é traduzido de sites estrangeiros.
Crie um novo estilo CSS da seguinte maneira:
#item{
largura: 200px;
altura: 200px;
fundo: vermelho;
}
Crie uma nova div e use o estilo CSS definido anteriormente:
<div id="item">algum texto aqui</div>
Adicione o atributo lang aqui no desempenho corporal, o chinês é zh:
<body lang="pt">
Agora defina outro estilo para o elemento div:
*:lang(pt) #item{
fundo:verde !importante;
}
Isso é feito para substituir o estilo CSS original por !important. Como o seletor :lang não é suportado pelo IE7.0, ele não terá nenhum efeito nesta frase. Portanto, o mesmo efeito no IE6.0 é alcançado. é muito difícil. Infelizmente, o Safari também não suporta esse atributo, então você precisa adicionar o seguinte estilo CSS:
#item:vazio {
fundo: verde! importante
}
O seletor :empty é uma especificação CSS3 Embora o Safari não suporte esta especificação, este elemento ainda será selecionado Independentemente de este elemento existir, o verde agora aparecerá em navegadores diferentes das versões do IE.
Para compatibilidade com IE6 e FF, você pode considerar o anterior! Importante. Pessoalmente, prefiro o primeiro, que é simples e tem melhor compatibilidade.