1.FireFox não pode suportar o InnerText.
O Firefox suporta o InnerHTML, mas não suporta o InnerText. Ele suporta o TextContent para implementar o InnerText, mas os espaços desnecessários também são preservados por padrão. Se você não usar o TextContent, se a string não contiver código HTML, também poderá usar o InnerHTML.
2. É proibido selecionar o conteúdo da página da web:
No IE, JS é geralmente usado: obj.OnselectStart = function () {return false;}
O Firefox usa CSS: -Moz-User-Select: Nenhum
3. Suporte ao filtro (exemplo: filtro transparente):
IE: filtro: alfa (opacidade = 10);
Firefox: -moz-opacity: .10;
4. Capture Events:
Ou seja: obj.setcapture (), obj.releasecapture ()
Firefox: document.addeventListener ("mousemove", mousemovefunção, true);
Document.RemoveEventListener ("MouseMove", MouseMoveFunction, True);
5. Obtenha a posição do mouse:
Ie: event.clientx, event.clienty
Firefox: a função de evento precisa passar o objeto de evento
obj.onMousEMove = function (ev) {
X = ev.pagex; y = ev.pagey;
}
6. Questões de limite de elementos como Div:
Por exemplo: Defina o CSS :: {largura: 100px; altura: 100px; borda:#000000 1px sólido;}
No IE: a largura da div (incluindo largura da borda): 100px, a altura da div (incluindo largura da borda): 100px;
E Firefox: a largura da div (incluindo largura da borda): 102px, a altura da div (incluindo largura da borda): 102px;
Então, ao fazer essa janela de arrasto que é compatível com o IE e o Firefox, você deve usar seu cérebro para escrever JS e CSS e fornecer duas dicas
1. Determine o tipo de navegador:
var isie = document.all? Verdadeiro: falso;
Eu escrevi uma variável, se document.Al Sintaxe for suportado então isie = true, caso contrário, isie = false
2. Processamento de CSS em diferentes navegadores:
Geralmente, você pode usar! Importante para priorizar as declarações CSS (apenas suportadas pelo Firefox)
Por exemplo: {largura de borda: 0px! IMPORTANTE; largura de borda: 1px;}
Sob o Firefox, esse elemento não tem fronteira e, sob o IE, a largura da fronteira é 1px
1.document.formName.item ("ItemName") Problema
Descrição do problema: no IE, você pode usar o document.formname.item ("itemName") ou document.formname.elements ["elementName"]; No Firefox, você pode usar apenas document.formName.elements ["ElementName"].
Solução: use Document.FormName.Elements ["ElementName"] de maneira unificada.
2. Problema de objeto de coleção
Descrição do problema: no IE, você pode usar () ou [] para obter o objeto da classe de coleta; No Firefox, você só pode usar [] para obter o objeto de classe de coleta.
Solução: use [] para obter objetos de classe de coleta de maneira unificada.
3. Questões de atributo personalizado
Descrição do problema: no IE, você pode usar o método de obter 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 alternativa: obtenha uniformemente atributos personalizados através do getAttribute ().
4.Eval ("IdName") Problema
Descrição do problema: No IE, você pode usar o EVAL ("idname") ou getElementById ("idname") para obter objeto html com idname; No Firefox, você só pode usar o GetElementById ("IdName") para obter objeto HTML com IDName.
Solução: use getElementById ("idname") para obter o objeto HTML com ID como idName.
5. Problema com o mesmo nome de variável que o ID do 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; Sob o Firefox, o nome da variável que é o mesmo que o ID do objeto HTML pode ser usado, mas não no IE.
Solução alternativa: use document.getElementById ("idname") em vez de document.idname. É melhor não levar nomes de variáveis com o mesmo ID do objeto HTML para reduzir erros; Ao declarar variáveis, adicione a palavra -chave VAR para evitar a ambiguidade.
6. CONSCRIÇÃO
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 para definir constantes uniformemente.
7. Problema de atributo input.Type
Descrição do problema: a propriedade Input.Type sob o IE é somente leitura; Mas a propriedade Input.Type sob o Firefox é leitura.
Solução: não modifique a propriedade Input.Type. Se você precisar modificá -lo, primeiro oculte a entrada original e insira um novo elemento de entrada na mesma posição.
8.Window.Event Problem
Descrição do problema: Window.Event só pode ser executado no IE, não no Firefox, porque o evento Firefox só pode ser usado na cena em que o evento ocorre.
Solução: adicione parâmetros de evento à função onde o evento ocorre e use var myevent = evt?
Exemplo:
A cópia do código é a seguinte:
<input type = "button" onclick = "doSomething (event)"/>
<Script Language = "JavaScript">
função doSomething (evt) {
var myevent = evt?
...
}
9. Event.x e Event.y Issues
Descrição do problema: no IE, o objeto uniforme possui atributos X e Y, mas não há atributos PageX e Pagey; Sob o Firefox, o objeto uniforme possui atributos PageX e Pagey, mas nenhum atributo X e Y.
Solução: var myx = event.x? event.x: event.pagex; var myy = event.y? Event.Y: Event.Pagey;
Se você considerar a 8ª edição, basta usar o MyEvent em vez do evento.
10.Event.srcelement Problem
Descrição do problema: no IE, o objeto uniforme possui uma propriedade SRCELEMENT, mas nenhuma propriedade de destino; Sob o Firefox, o objeto uniforme possui uma propriedade de destino, mas nenhuma propriedade SRCELEMENT.
Solução: use srcobj = event.srcelement? Event.srcelement: event.target;
Se você considerar a 8ª edição, basta usar o MyEvent em vez do evento.
11.Window.Location.Href Problem
Descrição do problema: No IE ou Firefox2.0.x, você pode usar o Window.Location ou Window.Location.href; No Firefox1.5.x, você só pode usar o Window.Location.
Solução alternativa: use window.location em vez de window.location.href. Obviamente, você também pode considerar usar o método Location.Replace ().
12. Problemas de janela modal e não modal
Descrição do problema: no IE, janelas modais e não modais podem ser abertas através do ShowModaldialog e ShowModlessDialog; Sob o Firefox, não pode.
Solução: use window.open (pageurl, nome, parâmetros) para abrir uma nova janela.
Se você precisar passar os parâmetros na janela da criança de volta para a janela dos pais, poderá usar a janela.Perpener na janela da criança para acessar a janela do pai. Se a janela dos pais precisar controlar a janela filho, use var subwindow = window.open (pageurl, nome, parâmetros); Para obter o objeto de janela recém -aberto.
13. Questões de quadro e iframe
O quadro a seguir é um exemplo:
<quadro src = "xxx.html" id = "frameId" name = "Framename" />
(1) Objeto da estrutura de acesso
IE: use window.frameId ou window.frameName para acessar esse objeto de quadro;
Firefox: use window.frameName para acessar esse objeto de quadro;
Solução: use window.document.getElementById ("frameId") para acessar esse objeto de quadro;
(2) Conteúdo do quadro da mudança
Tanto no IE quanto no Firefox, você pode usar o window.document.getElementById ("frameId"). 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, poderá usar a palavra -chave pai no quadro para acessar a janela do pai.
14. Problema de carregamento corporal
Descrição do problema: existe o objeto corporal do Firefox antes que a etiqueta corporal seja totalmente lida pelo navegador; Enquanto o objeto corporal do IE deve existir depois que a etiqueta corporal é totalmente lida pelo navegador.
[Nota] Este problema ainda não foi verificado e será modificado após a verificação.
[Nota] Foi provado que os problemas acima não existem no IE6, Opera9 e Firefox2. Um script JS simples pode acessar todos os objetos e elementos que foram carregados antes do script, mesmo que esse elemento ainda não tenha sido carregado.
15. Método delegado de evento
Descrição do problema: no IE, use document.body.onload = injeção; onde a função inject () foi implementada antes disso; 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. Diferenças entre os elementos dos pais acessados
Descrição do problema: no IE, use obj.parenteLement ou obj.parentNode para acessar o nó dos pais da Obj; Sob o Firefox, use obj.parentnode para acessar o nó dos pais da OBJ.
Solução: como o Firefox e o IE suportam o DOM, obj.parentNode é usado para acessar o nó pai da OBJ.
17.Cursor: Hand vs Cursor: Ponteiro
Descrição do problema: o Firefox não suporta a mão, mas o IE suporta o ponteiro, ambos são indicadores em forma de mão.
Solução: Use o ponteiro de maneira unificada.
18. O problema com o InnerText.
Descrição do problema: O InnerText funciona corretamente no IE, mas o InnerText não funciona no Firefox.
Solução alternativa: use o TextContent em vez do InnerText em navegadores que não são de AI.
Exemplo:
A cópia do código é a seguinte:
if (navegator.appname.indexof ("explorer")> -1) {
document.getElementById ('Element'). InnerText = "meu texto";
} outro{
document.getElementById ('elemento'). textContent = "meu texto";
}
[Nota] O InnerHTML é suportado por navegadores como IE e Firefox. Outros, como o OuterHtml, são suportados apenas pelo IE, por isso é melhor não usá -lo.
19. Problema de largura e altura do objeto
Descrição do problema: A declaração semelhante ao obj.style.Height = imgobj.Height in Firefox é inválida.
Solução: use obj.style.Height = imgobj.Height + 'px' em uniforme;
20. Problemas de operação da tabela
Descrição do problema: IE, Firefox e outros navegadores têm operações diferentes nas tags de tabela. No IE, não tem permissão para atribuir valores innerhtml à tabela e tr. Ao usar o JS, o uso do método AppendChild não funciona.
Solução:
A cópia do código é a seguinte:
// Adicione uma linha em branco à tabela:
var row = Otable.insertrow (-1);
var celular = document.createElement ("td");
Cell.innerhtml = "";
Cell.className = "xxxx";
row.appendChild (célula);
[Nota] Como eu raramente uso o JS para operar tabelas diretamente, nunca encontrei esse problema. Recomenda -se usar conjuntos de estruturas JS para manipular tabelas, como o jQuery.
21. Edição da UL e OL List Indentation
Ao eliminar o recuo de listas como UL, OL, etc., o estilo deve ser escrito como: estilo de lista: nenhum; margem: 0px; preenchimento: 0px;
O atributo de margem é válido para o IE e o atributo de preenchimento é válido para o Firefox. ← Esta frase está incorreta, consulte os detalhes ↓
[Nota] Este problema ainda não foi verificado e será modificado após a verificação.
[Nota] Foi provado que, no IE, definindo a margem: 0px pode remover os recuos, em branco, números ou pontos da lista da lista, e a configuração do preenchimento não tem efeito no estilo; No Firefox, a margem de configuração: 0px pode remover apenas o espaço em branco para cima e para baixo e, após definir o preenchimento: 0px pode remover apenas os recuos esquerdo e direito, e você também deve definir o estilo da lista: nenhum para remover o número da lista ou os pontos. Em outras palavras, no IE, você pode alcançar o efeito final simplesmente definindo a margem: 0px, preenchimento: 0px e estilo de lista: nenhum deve ser definido ao mesmo tempo no Firefox para obter o efeito final.
22. Problema de transparência CSS
IE: Filtro: Progid: dxxETransform.microsoft.alpha (style = 0, opacidade = 60).
FF: Opacity: 0.6.
[Nota] É melhor escrever os dois e colocar o atributo de opacidade abaixo.
23. Problema de canto arredondado do CSS
IE: As seguintes versões 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-Radius-Bottomright: 4px;.
[Nota] O problema do canto arredondado é um problema clássico no CSS. Recomenda -se usar o conjunto da estrutura do jQuery para definir cantos arredondados para deixar esses problemas complexos para que outros pensem.
Existem muitas perguntas sobre CSS, e até as mesmas definições de CSS têm diferentes efeitos de exibição em diferentes padrões de página. Uma sugestão adequada é que a página seja escrita no padrão DHTML padrão, e o uso de tabelas raramente é usado. A definição CSS deve ser baseada no DOM padrão o máximo possível, e os navegadores principais como IE, Firefox e Opera também são levados em consideração. BTW, em muitos casos, os padrões de interpretação do CSS de FF e Opera estão mais próximos dos padrões CSS e são mais padronizados.