Freqüentemente, há muitos problemas de incompatibilidade entre IE e FF no layout de páginas CSS. Aqui estão algumas possibilidades comuns e suas soluções!
1. Use !important para resolver as diferenças de layout entre IE e Mozilla !important é uma sintaxe definida em CSS1. Sua função é aumentar a prioridade de aplicação de regras de estilo especificadas. O ponto mais importante é que o IE nunca suportou essa sintaxe, mas outros navegadores sim. Portanto, podemos usar isso para definir estilos diferentes para o IE e outros navegadores. Por exemplo, definimos um estilo como este:
Exemplo de código-fonte
[www.downcodes.com] .colortest{
borda:20pxsolid#60A179!importante;
borda:20pxsolid#00F;
preenchimento:30px;
largura:300px;
}
Ao navegar no Mozilla, ele consegue entender a prioridade de !important, então a cor #60A179 é exibida; ao navegar no IE, ele não consegue entender a prioridade de !important, então a cor #00F é exibida;
2. Resolva o problema de que o estilo de foco não é exibido após o acesso ao hiperlink. Altere a ordem das propriedades CSS: O padrão de ordem deve ser:
a:link—a:visitado—a:passar o mouse—a:ativo
3. Como exibir o conteúdo em Li com reticências após exceder o comprimento Exemplo de código-fonte
[www.downcodes.com] <meta content="text/html; charset=gb2312" http-equiv="Content-Type" />
<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>
<ul>
<li><a href="#">CSS Web Design Adoro padronização CSS-Web - www.52CSS.com</a></li>
<li><a href="#">Perguntas frequentes sobre padrões da Web - www.downcodes.com</a></li>
</ul>
margin:3px - significa que todos os lados têm 3px;
margin:3px 5px - significa que o valor da parte superior e inferior é 3px, e o valor da direita e da esquerda é 5px
margin:3px 5px 7px —— indica que o valor do topo é 3, o valor da direita e da esquerda é 5 e o valor do fundo é 7
margem: 3px 5px 7px 5px – os quatro valores representam superior, direita, inferior, esquerda;
5. Resolva o problema de que o IE não consegue exibir PNG transparente corretamente - adicione código no cabeçalho Exemplo de código-fonte
[www.downcodes.com] <linguagem script="javascript">
função corretaPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display: bloco embutido;" + img.style.cssText
if (img.align == "esquerda") imgStyle = "float:esquerda;"
if (img.align == "direita") imgStyle = "float:direita;"
if (img.parentElement.href) imgStyle = "cursor:mão;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ "estilo="" + "largura:" + img.width + "px; altura:" + img.height + "px;" + imgStyle + ";"
+ "filtro:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='escala');"></span>"
img.outerHTML = strNewHTML
eu = eu-1
}
}
}
window.attachEvent("onload", corretoPNG);
</script>
Usar (preenchimento:0; margem:0; estilo de lista:dentro;)
Ou (padding:0; margin:0; list-style:none;) para obter compatibilidade
7. Solução para a diferença de 2px na interpretação do modelo BOX no Firefox e IE Exemplo de código-fonte
[www.downcodes.com] div{
margem:30px!importante;
margem:28px;
}
Observe que a ordem dessas duas margens não deve ser invertida. De acordo com o mencionado acima, o IE não suporta! Importante, então na verdade é interpretado assim no IE:
Exemplo de código-fonte
[www.downcodes.com] div{
maring:30px;
margem: 28px
}
Se houver definições repetidas, a última será executada, então você não pode simplesmente escrever margin:XXpx!important;
8. Efeito padrão da margem O conteúdo da div é centralizado por padrão no IE e alinhado à esquerda no FF por padrão. A maneira de centralizar o conteúdo do ff é adicionar o código margin:auto;
