O tópico que estamos discutindo é o layout da página da web CSS. O problema mais problemático para todos é a compatibilidade do navegador. Embora 52CSS.com tenha introduzido muito conhecimento nessa direção, ainda confunde muitos desenvolvedores. -três diferenças entre JavaScript e JavaScript no IE e Firefox. Espero que seja útil para o aprendizado de todos.
1. problema 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 document.formName.elements["elementName"]; .
Solução: Use document.formName.elements["elementName"] uniformemente.
2. Problemas com objetos de coleção Descrição do problema: 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 classe de coleção.
3. Problema de atributos personalizados Descrição do problema: 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 obtê-los.
Solução: obtenha atributos personalizados de maneira uniforme por meio de getAttribute().
4. problema 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ê pode; use apenas getElementById ("idName") para obter o objeto HTML com o id idName.
Solução: Use getElementById("idName") uniformemente para obter o objeto HTML cujo 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, ele pode ser usado com o objeto HTML. Nomes de variáveis com o mesmo ID não podem ser usados 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. Problema 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 com o 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:
9. Problemas com event.x e event.y
Descrição do problema: No IE, o objeto par possui atributos xey, mas não possui atributos pageX e pageY; no Firefox, o objeto par possui atributos pageX e pageY, mas não possui atributos pageX e pageY; nenhum atributo x, y.
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 nenhum atributo target; no Firefox, o objeto par possui o atributo target, mas nenhum 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. localização.
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 pode ser feito.
Solução: use diretamente 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. Problemas de frame e iframe
Tomemos o seguinte frame como exemplo:
(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 alternar o conteúdo do quadro, você pode usar window.document.getElementById("frameId").src = "52css.com.html" ou window.frameName.location = "52css.com.html" no IE e no Firefox . O conteúdo do quadro;
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 ser carregado 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. Método de delegação de eventos
Descrição do problema: 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. Diferenças nos elementos pai acessados
Descrição do problema: No IE, use obj.parentElement ou obj.parentNode para acessar o nó pai de obj no Firefox, use obj.parentNode para acessar o nó pai de obj;
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:
Exemplo de código-fonte [www.downcodes.com] if(navigator.appName.indexOf("Explorador") >-1){
document.getElementById('element').innerText = "meu texto";
} outro{
document.getElementById('element').textContent = "meu texto";
}
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 obj.style.height = imgObj.height + 'px' uniformemente.
20. Problemas de operação de tabela
Descrição do problema: IE, Firefox e outros navegadores têm operações diferentes na tag de tabela No IE, a atribuição innerHTML de tabela e tr não é permitida ao usar js para adicionar um tr. o método appendChild também não funciona.
Solução:
Exemplo de código-fonte [www.downcodes.com] //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);
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. Para obter mais conhecimento, consulte o artigo em 52CSS.com. Uma sugestão que está em linha com o desenvolvimento é que a página seja escrita usando o padrão DHTML, com menos uso de tabelas. A definição de CSS deve ser baseada no padrão DOM, tanto quanto possível, levando em consideração os navegadores convencionais como o 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. 