Este artigo resume os problemas de compatibilidade entre CSS e JavaScript em um grande número de exemplos. Compartilhe para sua referência. O resumo específico é o seguinte:
1. Compatibilidade do estilo CSS
1. Float Float
As páginas da web estão desalinhadas em alguns navegadores, geralmente porque o flutuador é usado e não está realmente fechado, o que também é uma razão pela qual a div não pode se adaptar à altura. Se a divisão dos pais não definir flutuação, mas sua divisão infantil tem flutuação, a div, não poderá cobrir toda a divisão da criança. Essa situação geralmente ocorre quando uma divisão dos pais contém várias divs de crianças. Solução:
1) Defina o flutuador para o pai Div
2) Adicione uma div vazia depois de todos os subdivs (é isso que o EXT faz atualmente), por exemplo:
.parent {width: 100px;}. SON1 {float: esquerda; largura: 20px;}. SON2 {float: esquerda; largura: 80px;}. Clear {limpo: ambos; margem: 0; Parding0; altura: 0px; font-size: 0px;} <div>>;3) Float universal fechado
Adicione o código a seguir ao CSS global e adicione class = "clearfix" à div que precisa ser fechada, o que foi tentado e feito.
<Toy>/* CLEAR CIRM*/. Clearfix: após {content: "."; Display: block; altura: 0; claro: ambos; visibilidade: hidden;}. clearfix {display: inline-block;}/* hide do ie mac* /*/ */*.clearfix {display: block;}/* hide do ie Mac* //**: 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 esse objeto pseudo e não é suportado pelo navegador do IE, por isso não afeta o navegador IE/Win. Este é o mais problemático.
4) Overflow: Auto
Basta adicionar estouro: automático ao CSS da Div pai. Por exemplo:
.Parent {Width: 100px; Overflow: Auto} .son1 {float: esquerda; largura: 20px;}. SON2 {float: esquerda; largura: 80px;} <div> <div> </div> <div> </div> </div>O princípio é que a razão pela qual os elementos periféricos não podem ser bem estendidos estão bem no transbordamento porque o transbordamento é invisível (consulte a explicação do W3C). Agora, basta adicionar um "Overflow: Auto" ao elemento periférico, e o resultado é que ele pode realmente ser resolvido, exceto no IE. Em seguida, precisamos resolver o problema do IE. Adicionar "_Eight: 1%" resolverá completamente esse problema. Eu tentei, mas não há problema em adicionar "_Eight: 1%" no IE, então mantenha -o.
2. Corte o léxico
.hh {-o-text-overflow: elipsis; text-overflow: elipsis; white-space: Nowrap; transbleto: hidden;}Isso significa que, após o comprimento excedido, o texto extra será cortado por si só e terminará com uma elipse. A tecnologia é uma boa tecnologia, e muitas pessoas gostam de usá -la aleatoriamente, mas observe que o Firefox não a suporta.
<meta http-equiv = "x-ua compatível com" content = "ie = 7" />
Adicionar esta frase à página pode tornar a página compatível com o IE7
Para referência! Eu gostaria de lembrá -lo sobre um problema flutuante. Preste atenção à definição da largura e altura da div. Preste atenção à definição do estouro: oculto; Preste atenção ao fechamento da tela: Block Inline para os estilos de divisão dos pais do Firefox;
3. Cursor: Hand and Cursor: Ponteiro
O Firefox não suporta a mão, mas o IE suporta o ponteiro
Solução: Use ponteiro uniformemente
4. CSS transparente
Vários navegadores apóiam a transparência de maneiras diferentes. Para garantir que o efeito de transparência possa ser exibido normalmente nos navegadores principais, como IE, Firefox, Chrome, Safari, etc., podemos definir uma classe de transparência, porque você precisa escrever 3 itens assim que escrevê -lo, economizando -o de todas as vezes.
O código específico é o seguinte:
.Transparent {filtro: alfa (opacidade = 60); /*Suporte IE navegador*/-Moz-opacidade: 0,6; /*Support Firefox Browser*/Opacity: 0.6; /*Apoie Chrome, Opera, Safari e outros navegadores*/}5.Width e preenchimento em CSS
No IE7 e FF, a largura da largura não inclui preenchimento, mas no IE6.
2. Compatibilidade de JavaScript
1. Crianças e crianças.
Há uma diferença de comportamentos de crianças, crianças e crianças em Firefox fornecidas pelo IE. O ChildrenNodes sob o Firefox contará as quebras de linha e o espaço em branco como filhos dos nós dos pais, enquanto crianças e filhos do IE não o farão. por exemplo:
<div id = "dd">
<div> yizhu2000 </div>
</div>
Uma div com identificação DD é vista com ChildNodes sob o IE. O número de crianças é 1 e três sob ff. Podemos ver do visualizador DOM do Firefox que seus filhos são ["/n", div, "/n"].
Para simular as propriedades das crianças sob o Firefox, podemos fazer isso:
if (typeof (htmlelement)! = "indefinido" &&! window.opera) {htmlelement.prototype .__ definegetter __ ("crianças", function () {for (var a = [], j = 0, n, i = 0; this.childnodes.l) e; 1) {a [j ++] = n;2. Eventos do Firefox e IE
Window.Event só pode ser usado no IE, não no Firefox, porque o evento Firefox só pode ser usado na cena em que o evento ocorre. O Firefox deve adicionar o evento da fonte para a passagem de parâmetros. O IE ignora esse parâmetro e usa a janela.Event para ler o evento.
Por exemplo, o método a seguir para obter a posição do mouse no IE:
<button onclick = "OnClick ()"> Obtenha a coordenada horizontal do mouse clique </button> <script type = "text/javascript"> function onclick () {alert (event.clientX);} </sCript>Precisa ser alterado para
<button onclick = "OnClick (Event)"> Obtenha outerhtml </button> <script type = "text/javascript"> function onclick (event) {event = event || window.event; alert (event.clientX);} </sCript>Use -o apenas nos dois navegadores
3. Problema de aquisição de objetos HTML
Document do Método Get Firefox.GetElementById ("IdName")
IE usa document.idname ou document.getElementById ("idName")
Solução: use document.getElementById ("idname");
4. Edição const
No Firefox, você pode usar a palavra -chave const ou a palavra -chave var para definir constantes;
No IE, você só pode usar a palavra -chave VAR para definir constantes;
Solução: use a palavra -chave var para definir constantes.
5. Problema do quadro
O quadro a seguir é um exemplo:
<quadro src = "xxx.html" id = "frameId" name = "Framename" />
a) Objeto de quadro de acesso
IE: use window.frameId ou window.frameName para acessar esse objeto de quadro.FrameID e Framename podem ter o mesmo nome;
Firefox: somente Window.frameName pode ser usado para acessar esse objeto de quadro;
Além disso, tanto no IE quanto no Firefox, você pode usar o Window.document.getElementById ("frameId") para acessar esse objeto de quadro;
b) Switch Frame Content
No IE e no Firefox, você pode usar window.document.getElementById ("testFrame"). Src = "xxx.html" ou window.framename.Location = "xxx.html" para alternar o conteúdo do quadro;
Se você precisar passar os parâmetros no quadro de volta para a janela pai (observe que ele não é um abridor, mas um pai), você pode usar o pai no quadro para acessar a janela pai. Por exemplo:
parent.document.form1.filename.value = "aqing";
6. Problema corporal
O corpo de Firefox existe antes que a etiqueta corporal seja totalmente lida pelo navegador; Enquanto o corpo do IE deve existir depois que a etiqueta corporal é totalmente lida pelo navegador;
7. A diferença entre o Firefox e o elemento pai ou mãe (ParentElement)
Ou seja: obj.parentelement
Firefox: obj.parentNode
Solução: Como o Firefox e o IE suportam o DOM, todos usam obj.parentNode
8.InnerText Problem
O InnerText funciona normalmente no IE, mas o InnerText não funciona no Firefox, o TextContent é necessário;
Solução:
if (navegator.appname.indexof ("explorer")> -1) {document.getElementById ('elemento'). innerText = "meu texto";} else {document.getElementById ('elemento'). TextContent = "meu texto";}9. A diferença entre o Ajax recebendo xmlHttp
var xmlhttp; if (window.xmlHttPrequest) {xmlHttp = new XmlHttPreQuest ();} elseif (window.activeXObject) {// ie método de aquisição xmlhttp = new ActiveXObject ("microsoft.xmhtttp") ")Nota: No IE, o conteúdo do método xmlHttp.send (conteúdo) pode estar vazio, enquanto o Firefox não pode ser nulo. Send ("") deve ser usado, caso contrário, ocorrerá um erro 411.
Espero que este artigo seja útil para a programação da Web de todos.