Todo designer, que se preza, sabe que uma coisa que O Internet Explorer (browser preferido dos leigos) não segue os padrões internacionais, pelo contrário, cria seus próprios padrões a cada versão e nas vezes são incompatíveis até mesmo entre elas. Well, hoje me deparei com um problema desses, na verdade não fui eu mas acabei caindo no problema da mesma forma. No CSS tínhamos algo como:
input:hover { background-color: #000; color: #FFF; }
O código estava em arquivo CSS comum como outro qualquer e, para minha alegria, funcionava perfeitamente no Firefox (browser preferido de quem sabe pra que serve um padrão :D), mas no IE7 era como se nem existisse. Pensei comigo mas isso vai de encontro à filosofia do "Que o IE exploda juntamente com seus usuários Software Livre já que ela, em algum ponto, diz que o usuário deve ter a oportunidade de escolher um programa dentre vários para resolver seu problema, e como a maioria (forçadamente) ainda escolhe o IE então temos, como obrigação de desenvolvedores, prover soluções para isso.
Pesquisando um pouquinho verifico uma série de soluções que nunca funcionam, a maioria delas em fórum que, em geral, aparecem muitas soluções que não solucionam nada. Aparentemente os usuários de fóruns gostam de postar a primeira solução que aparece no Google esquecendo, muitas vezes, de ler a dúvida toda e verificando que a solução que quer postar só funcionam para alguns cenários mas não para todos, principalmente o exposto pelo prejudicado. As solução iam desde códigos Javascript à instaladores de outros browsers que os usuários teriam que executá-los sempre que executassem a página com o problema proferido no começo deste post.
Até que, finalmente, um felizardo encontra uma solução e me felicito ao ver que não preciso de nenhuma gambiarra para solucionar tal problema. Segundo o autor só é preciso adicionar o seguinte código como primeira linha do arquivo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Eu vi, e pensei "Só isso?" e a resposta era positiva. Pelo menos para o :hover. Mas analizemos para que serve esta linha:
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Aqui informamos para o browser que tipo de documento ele está formatando, neste caso um HTML dentro dos padrões W3C e na versão 4.01
"http://www.w3.org/TR/html4/strict.dtd"Esta é a parte mais importante da solução, é este DTD que vai informar que atributos e tags são suportados na sua página. Para maiores detalhes (http://www.w3schools.com/tags/tag_DOCTYPE.asp)
A solução realmente funciona para o :hover e, felizmente, outro felizardo encontrou o restante da minha solução. Na verdade o página não tem o propósito de mostrar a solução mas o código fonte dela a possui. A diferença da solução anterior é apenas:
"http://www.w3.org/TR/html4/loose.dtd"
"http://www.w3.org/TR/html4/strict.dtd"
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Fontes:
http://www.bernzilla.com/item.php?id=762
http://meyerweb.com/eric/css/tests/css2/sec05-11-03.htm
http://www.w3.org/TR/html4/struct/global.html#h-7.1
http://www.w3schools.com/tags/tag_DOCTYPE.asp
Nenhum comentário:
Postar um comentário