1. document.formName.item("itemName") Descrição do problema: No IE, você pode usar document.formName.item("itemName") ou document.formName.elements ["elementName"] no Firefox, você só pode usar; documento .formName.elements["elementName"].
Solução: Use document.formName.elements["elementName"] uniformemente.
2. Problema de objeto de coleção Descrição: No IE, você pode usar () ou [] para obter objetos de coleção; no Firefox, você só pode usar [ ] para obter objetos de coleção.
Solução: Use [] uniformemente para obter objetos de coleção.
3. Problema de atributos personalizados Descrição: No IE, você pode usar o método de obtenção de atributos regulares para obter atributos personalizados ou pode usar getAttribute() para obter atributos personalizados no Firefox, você só pode usar getAttribute() para obter atributos personalizados; .
Solução: obtenha atributos personalizados de maneira uniforme por meio de getAttribute().
4. eval("idName") Descrição do problema: No IE, você pode usar eval("idName") ou getElementById("idName") para obter o objeto HTML com o id idName no Firefox, você só pode usar getElementById("; idName" ) para obter o objeto HTML com o id idName.
Solução: Utilize getElementById("idName") uniformemente para obter o objeto HTML com o id idName.
5. O problema de o nome da variável ser igual ao ID de um objeto HTML Descrição do problema: No IE, o ID do objeto HTML pode ser usado diretamente como o nome da variável do objeto subordinado do documento, mas não no. Firefox; no Firefox, a variável com o mesmo ID do nome do objeto HTML pode ser usada, mas não no IE.
Solução alternativa: use document.getElementById("idName") em vez de document.idName. É melhor não usar nomes de variáveis com o mesmo ID de objeto HTML para reduzir erros ao declarar variáveis, sempre adicione a palavra-chave var para evitar ambiguidade;
6. Const Descrição do problema: 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 uniformemente para definir constantes.
7. Problema no atributo Input.type Descrição do problema: O atributo input.type no IE é somente leitura, mas o atributo input.type no Firefox é leitura-gravação;
Solução: Não modifique o atributo input.type. Se precisar modificá-lo, você pode primeiro ocultar a entrada original e depois inserir um novo elemento de entrada na mesma posição.
8. Problema com Window.event Descrição do problema: window.event só pode ser executado no IE, mas não no Firefox Isso ocorre porque o evento do Firefox só pode ser usado no local onde o evento ocorre.
Solução: adicione o parâmetro de evento à função onde o evento ocorre e use var myEvent = evt?evt:(window.event?window.event:null) no corpo da função (assumindo que o parâmetro formal seja evt)
Exemplo:
código do programa
<input type="button" onclick="doSomething(event)"/>
<linguagem script="javascript">
function façaAlgo(evt) {
var meuEvento = evt?evt:(window.event?window.event:null)
...
}
</script>
9. Event.x e event.y Descrição do problema: No IE, o objeto par possui atributos x e y, mas não os atributos pageX e pageY; no Firefox, o objeto par possui atributos pageX e pageY, mas não possui atributos xey;
Solução: var myX = event.x ? event.x : event.pageX;
Se você considerar a questão 8, basta usar myEvent em vez de event.
10. Problema Event.srcElement Descrição do problema: No IE, o objeto par possui o atributo srcElement, mas não o atributo target; no Firefox, o objeto par possui o atributo target, mas não possui o atributo srcElement;
Solução: Use srcObj = event.srcElement ? event.srcElement : event.target;
Se você considerar a questão 8, basta usar myEvent em vez de event.
11. Problema Window.location.href Descrição do problema: No IE ou Firefox2.0.x, você pode usar window.location ou window.location.href; no Firefox1.5.x, você só pode usar window.location.
Solução alternativa: use window.location em vez de window.location.href. Claro, você também pode considerar usar o método location.replace().
12. Problemas com janelas modais e não modais Descrição do problema: No IE, janelas modais e não modais podem ser abertas através de showModalDialog e showModelessDialog no Firefox, isso não é possível.
Solução: use diretamente o método window.open(pageURL,name,parameters) para abrir uma nova janela.
Se precisar passar parâmetros da janela filho de volta para a janela pai, você pode usar window.opener na janela filho para acessar a janela pai. Se você precisar que a janela pai controle a janela filho, use var subWindow = window.open(pageURL,name,parameters);
13. A questão do quadro e do quadro i toma como exemplo o seguinte quadro:
<frame src=" http://www.abc.com/123.html " id="frameId" name="frameName" />
(1) Acesse o objeto frame IE: use window.frameId ou window.frameName para acessar o objeto frame;
Firefox: Use window.frameName para acessar este objeto frame;
Solução: Use window.document.getElementById("frameId") uniformemente para acessar este objeto frame;
(2) Para mudar o conteúdo do quadro, você pode usar window.document.getElementById("frameId").src = "index.html" ou window.frameName.location = "index.html" para mudar o conteúdo do quadro em ambos IE e Firefox;
Se precisar passar parâmetros no quadro de volta para a janela pai, você pode usar a palavra-chave pai no quadro para acessar a janela pai.
14. Problema de carregamento do corpo Descrição do problema: O objeto body do Firefox existe antes que a tag body seja totalmente lida pelo navegador, enquanto o objeto body do IE deve existir depois que a tag body for totalmente lida pelo navegador;
[Nota] Este problema não foi realmente verificado e será modificado após a verificação.
[Nota] Foi verificado que o problema acima não existe no IE6, Opera9 e FireFox2. Um script JS simples pode acessar todos os objetos e elementos que foram carregados antes do script, mesmo que o elemento ainda não tenha sido carregado.
15. Explicação do problema do método de delegação de eventos: no IE, use document.body.onload = inject; onde a função inject() foi implementada antes no Firefox, use document.body.onload = inject();
Solução: use document.body.onload=new Function('inject()'); ou document.body.onload = function(){/* Aqui está o código */}
[Nota] A diferença entre Função e função
16. A diferença entre elementos pai acessados Descrição da questão: No IE, use obj.parentElement ou obj.parentNode para acessar o nó pai de obj no Firefox, use obj.parentNode para acessar o pai de obj; nó pai.
Solução: como o Firefox e o IE suportam DOM, obj.parentNode é usado para acessar o nó pai de obj.
17. cursor:mão VS cursor:ponteiro
Descrição do problema: O Firefox não suporta mão, mas o IE suporta ponteiro. Ambas são instruções manuais.
Solução: Use o ponteiro uniformemente.
18. Problemas com texto interno.
Descrição do problema: innerText funciona normalmente no IE, mas innerText não funciona no FireFox.
Solução: use textContent em vez de innerText em navegadores não-IE.
Exemplo:
código do programa
if(navigator.appName.indexOf("Explorador") >-1){
document.getElementById('element').innerText = "meu texto";
} outro{
document.getElementById('element').textContent = "meu texto";
}
[Nota] innerHTML é suportado por navegadores como IE e Firefox ao mesmo tempo. Outros, como outerHTML, são suportados apenas pelo IE e é melhor não usá-los.
19. Problema de atribuição de largura e altura de objeto Descrição do problema: Declarações semelhantes a obj.style.height = imgObj.height no FireFox são inválidas.
Solução: use uniformemente obj.style.height = imgObj.height + 'px';
20. Problema de operação de tabela Descrição do problema: IE, Firefox e outros navegadores têm operações diferentes na tag da tabela, o que não é permitido no IE Para a atribuição innerHTML de tabela e tr, ao usar js para adicionar um tr, usar o método appendChild não funciona.
Solução:
código do programa
//Acrescenta uma linha vazia à tabela:
var linha = otable.insertRow(-1);
var célula = document.createElement("td");
cell.innerHTML = "";
célula.className = "XXXX";
linha.appendChild(célula);
[Nota] Como raramente uso JS para operar tabelas diretamente, nunca encontrei esse problema. Recomenda-se usar o framework JS para operar tabelas, como JQuery.
21. Problema de recuo de listas ul e ol Ao eliminar o recuo de listas ul, ol e outras listas, o estilo deve ser escrito como: list-style:none;margin:0px;padding:0px;
O atributo margin é válido para IE e o atributo padding é válido para FireFox. ← Esta frase está expressa incorretamente, consulte ↓ para obter detalhes
[Nota] Este problema não foi realmente verificado e será modificado após a verificação.
[Nota] Foi verificado que no IE, a configuração de margin:0px pode remover os recuos superior, inferior, esquerdo e direito, espaços em branco e números de lista ou pontos da lista. A configuração do preenchimento não afeta o estilo no Firefox; definir margin:0px só pode remover os recuos superior e inferior. Depois de definir padding:0px, você só pode remover os recuos esquerdo e direito. Você também deve definir list-style:none para remover números ou pontos da lista. Em outras palavras, no IE, apenas margin:0px pode ser definido para obter o efeito final, enquanto no Firefox, margin:0px, padding:0px e list-style:none devem ser definidos ao mesmo tempo para obter o efeito final.
22. Problema de transparência CSS, ou seja: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF: opacidade: 0,6.
[Nota] É melhor escrever ambos e colocar o atributo de opacidade abaixo.
23. Problema de cantos arredondados CSS IE: versões abaixo do IE7 não suportam cantos arredondados.
FF: -moz-border-radius:4px, ou -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- raio inferior direito:4px;.
[Nota] O problema dos cantos arredondados é um problema clássico em CSS. Recomenda-se usar o conjunto de quadros JQuery para definir cantos arredondados e deixar esses problemas complexos para outros.
Existem muitos problemas em CSS, e até mesmo a mesma definição de CSS tem diferentes efeitos de exibição em diferentes padrões de página. Uma sugestão que está em linha com o desenvolvimento é que a página seja escrita usando padrões DHTML padrão, com menos uso de tabelas. As definições CSS devem ser baseadas no DOM padrão tanto quanto possível, levando em consideração os navegadores convencionais como IE, Firefox. e Ópera. Aliás, em muitos casos, os padrões de interpretação CSS do FF e do Opera estão mais próximos dos padrões CSS e são mais normativos.