Compatibilidade com todos os navegadores?

[Matheus Matos]

Salve galera! estreiando o ducentésimo post[200]!

Enfim, uma grande chatice que ocorre hoje na hora de desenvolver sites, é sem dúvidas, a compatibilidade com todos os navegadores, principalmente entre o Firefox, e o IE.

Hacks___________________________________

Bem, começaremos com o Firefox, sabemos que ele utiliza o motor Gecko, pois é, apesar de ser considerado por alguns o navegador perfeito, o firefox tem seus defeitos, no lançamento da 3ª versão da raposa, foi muito reclamado que o firefox estava puxando muita memória da máquina, isso fez com que alguns usuários continuassem a utilizar o Firefox 2, ou passar a utilizar outro navegador, como o Google Chrome. Então, é bom saber que a 3ª versão do Firefox é diferente da 2ª versão, e que, arquivos css são lidos de maneira diferente. Um bom hacker que se pode citar é esse abaixo:

#suadiv { background:blue; } /* todos os navegadores */

#suadiv[id=suaDiv]{ background:green; } /* só Firefox 2 */

#suadiv, x:-moz-any-link, x:default { background:yellow; } /* Firefox 3 e IE7 */

Hm... porque só o firefox lê a segunda linha? Simples, utilizando-se o seletor de atributos (id), que está entre as colchetes, selecionamos todos os elementos que tenham o id=suaDiv, mas, analise que o 'D' está em maiusculo, o firefox 2, é case-insensitive, ou seja, para ele tanto faz 'suadiv' como 'suaDiv', o que os outros navegadores não fazem, ou seja, os outros navegadores são case-sensitive, e para eles, suadiv, é um elemento, e suaDiv é outro, como ele não acha esse id no xhtml, simplesmente não faz nada, e o firefox 2, lê o quê está em maiusculo, e executa o que ele pede. :D

Na terceira linha, é um hack para Firefox3, mas tem um porém, também é lido pelo o IE7. :( Uma maneira de resolver isso, é adicionar uma nova linha para estabelecer, qual linha o IE7 deve ler, assim:

#meudiv, x:-moz-any-link, x:default { background:yellow; } /* Firefox 3 e IE7 */

#meudiv { *background:red; } /* Restabelece valor para o IE7 */

----------------------------------------------------------------------------------------------------

Agora, partiremos para o IEca. Existe hacks eficientes para ele, e também para o IE7 e, separadamente o IE6que é o terror de webdesigners. Enfim, para fazer com que apenas o IE (todas as versões) leia determinada linha, basta colocar um *[asterisco] antes da linha da div no css, assim:

*background-color:blue; /* Todos IE's */

siim, mas como fazer que o apenas o IE6 leia alguma linha? Substiruiremos o *[asterisco] pelo um _[underline], assim:

_background-color:green; /* Apenas IE6 */ }

Problema com o Internet Explorer 6, e como resolvê-los;_____

______________________

div está com a margem maior [duplicada] :

Esse é um dos bugs mais comuns. Quando um elemento usa float:left e tem uma margem esquerda [margin-left] o internet explorer 6, sabe-se lá por quê, duplica o valor desta margem.

Solução:

Basta adicionar um display:inline na div ou em outro elemento que apresente esse problema.

div com 100% de altura [height:100%] mas não está funcionando. :

Quando você tem uma div com 100% de altura dentro de outro elemento sem altura definida o internet explorer 6 não 'entende' e exibe o layout de maneira errada.

Como resolver:

Defina uma altura fixa para o elemento que contém a sua div.

Minhas imagens PNG estão sem transparência :

É. IE6 não renderiza corretamente PNGs com transparência, o que torna seu uso um pouco arriscado, mas não impossível.

Solução:

Existe um patch quase desconhecido lançado pela Microsoft que corrige este problema, adicione ao seu CSS:

back\ground-color: transparent;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="yourPNG.png", sizingMethod="crop");

O Layout tem duas [3, 4] colunas com float:left mas uma delas sempre "cai" pra baixo da outra ao invés de ficar ao lado :

Isso também é comum, e pode ter dois motivos. Primeiro: se a sua coluna tem margin-left, o internet explorer 6 pode estar duplicando a margem então o espaço restante acaba sendo insuficiente e a sua coluna "cai". Segundo: mesmo que a sua coluna tenha uma largura definida, se houver qualquer elemento com largura maior dentro dela, o internet explorer 6 irá expandí-la.

Como resolver:

Primeiro, se sua coluna tem margin-left, coloque um display:inline pra ela.

Se o problema não for esse, provavelmente existe algum elemento forçando a largura da coluna. Procure por este elemento e arrume a sua largura. Se você não está encontrando coloque um overflow:hidden na sua coluna.

Meus itens de lista estão com o marcador desalinhado

Provavelmente você está usando padding-top no seu <li>.O ie6 não lida muito bem com paddings.

Solução:

Troque o padding-top por margin-top.

O ie6 está duplicando o final da minha última <li>, ou do meu último parágrafo

Esse bug é chato. Muito chato. Acontece por que o ie6 sempre "duplica o final do conteúdo do último elemento de uma série elementos com float:left que tenham comentários entre eles". Acredite ou não, é isso.

Como resolver:

Primeiro, tente retirar todos os comentários entre estes elementos. Se não for possível, coloque float:none nestes elementos e trabalhe com largura, altura e position para posicioná-los corretamente

Deixar seu layout perfeito em todos os navegadores, utilizando apenas um css, e sem hacks!_____________

Pois é, isso é possível utilizando-se classes condicionais, funciona assim:

<html>

<head>

<link rel="stylesheet" type="text/css" href="estilos.css" />

</head>

<!--[if IE 6 ]>

<body class="ie">

<![endif]–>

<!–[if !IE 6]>–>

<body>

<!–<![endif]–>

<div id="menu">conteúdo do site….</div>

</body>

</html>

Entenderam a jogada? Isso faz com que a classe "ie" [class="ie] seja aplicada apenas quando o browser utilizado é o Internet Explorer 6 [if IE 6]. Caso contrário o <body> fica sem nenhuma classe [o sinal "!" significa "não igual"]. Assim, podemos escrever nosso CSS da seguinte maneira:

div#menu { color: inherit; } /* linha interpretada por todos os browsers */

.ie div#menu { color: #ff8000; } /* linha interpretada apenas pelo IE 6 */

Ou seja, podemos colocar todas as correções precedidas pelo seletor de classe ".ie", dessa forma apenas o IE 6 irá interpretá-las. Eliminamos assim a necessidade de um segundo arquivo e ficamos livres também dos hacks, podendo então escrever CSS 100% válido.

Bem, pode-se ver um exemplo clicando aqui!

^{Tudo que foi citado até agora, teve como fonte posts do blog TopRated, do Domênico Citrângulo.}

Simular position:fixed no Internet Explorer______________________________________________________

Bem galera, o Internet Explorer 7 [eu acho] não suporta o position:fixed; enfim, eu vi essa dica que vou falar agora em um fórum por aí, infelizmente não lembro o qual, se alguém, pelo que vou dizer, souber, fala aew! :lol:

Então, se analisarmos bem, o internet explorer não suporta position:fixed mais aceita overflow na div! ;)

Tá resolvido! Não entendeu? Assim, você pode posicionar o elemento que você quer que fique fixo, com position absolute, ou relative, e após, criei uma div que servirá de um novo body, ou seja, coloque height:100% e width:100%; aí é so colocar um overflow-x:scroll; bem o código ficaria assim:

#novobody {height:100%; width:100%; overflow-x:scroll;}

#elementofixo {position:absolute; left:0px; top:200px;}

um exemplo bem simples, há, e caso queira que apenas o IE faça isso assim, basta utilizar as técnicas de hacks apresentadas acima...

------------------------------------------------------------------------------------------------------

Bem, escrevi copiei esse post pelo fato de ter algumas dúvidas aqui no fórum sobre IE6, como resolver isso, como resolver aquilo, e também todos nós sabemos, que o IE6 já está conseguindo estourar a paciência dos nossos queridos webdesigners e programadores, que fazem belas páginas para nós, apreciarmos com prazer! hehe... e para que isso seja cada vez melhor, falo da qualidade na web, devemos ter navegadores atualizados, e que estão por dentro das técnicas de validação utilizadas pela W3C, e também, que já estão compatíveis com novas versões de linguagens, tanto de marcação, que é o caso do HTML5, quanto de formatação, que é o caso do querido CSS3. Então, o que está esperando para largar o IEca6 e vir fazer parte do que já chamam de web3.0? Entre para a campanha atualize seu navegador, e venha fazer parte da revolução da web!

Bemdenovo, esperam que tenham gostado, e se possível, falem o que acharam das dicas, que são não minhas, mas do Dom, eu fiz apenas repassar! ;)

como já é de prache:

Vlw

Matheus Matos

Editado Setembro 18, 2009 por Matheus Matos

[Jonathan Queiroz]

Ótimo post !

É algo que será bem útil.

Eu pessoalmente evito o uso de hacks. Sempre tento achar alguma forma de resolver o problema e, se não conseguir, parto para os comentários condicionais. Para coisas extremamente simples posso até utilizar hacks.

[vini_loock]

Nossa mateus parabéns.

Eu tava procurando isso a muito tempo,você até deve ter visto posts aqui no fórum a respeito do portal que eu estou fazendo.

Vlw