Correção de Bugs CSS no IE7
Publicado em: 2006-08-24 — 49.646 visualizacoes
Agora é para valer!
Muito já se escreveu sobre o IE7 e a aderência às Web Standards. Poucas matérias de conteúdo consistente, a maioria como sempre, baseadas mais na paixão e menos na razão
— como sempre acontece quando se trata de Internet Explorer — e algumas poucas totalmente sem um mínimo de suporte técnico.
Contudo, qualquer que seja o enquadramento, na maioria esmagadora dos casos os fundamentos das matérias basearam-se nas versões iniciais e experimentais do navegador colocadas à disposição dos usuários para testes e sugestões e tomadas equivocadamente como definitivas.
Fui solicitado por diversas vezes a escrever sobre o tema o "IE7 e as CSS" e rejeitei a idéia, pois em fase de testes e versões alfas e betas e experimentais, o que se tem a escrever é apenas feedback ao fabricante e obviamente além da Microsoft sequer ter conhecimento do meu Blog/Site o lugar certo para escrever era no Blog da MS e em listas especificamente destinadas a feedback e em inglês. Ainda mais, qualquer conclusão ou análise feita, seria pura elucubração, sem qualquer valor para meus leitores.
Justificado meu silêncio para àqueles muitos leitores que me solicitaram escrever a respeito tão logo apareceram as versões iniciais do IE7, trago hoje para vocês as novidades efetivas, publicadas há dois dias atrás (em 22 de agosto) no Blog da Microsoft sob o título Details on our CSS changes for IE7 listando as modificações CSS introduzidas no IE7. Trata-se de uma matéria assinada por Markus Mielke – Program Manager da Microsoft e portanto uma informação oficial e consistente e não uma mera e vazia especulação.
A seguir os trechos daquela matéria onde autor detalha as modificações:
Lista dos bugs corrigidos:
- Todos os bugs documentados no site positioniseverything.net exceto o “escaping floats” (na pauta para o futuro)
- Peekaboo Bug
- Internet Explorer and Expanding Box Problem
- Quirky Percentages
- Line-height bug
- Border Chaos
- Disappearing List-Background bug
- Guillotine Bug
- Unscrollable Content bug
- Duplicate Characters Bug
- IE and Italics
- Doubled Float-Margin bug
- Duplicate Indent bug
- Three pixel text jog
- Creeping Text bug
- Missing First letter bug
- Phantom box bug
Outros bugs corrigidos (relatados em outras fontes que não o site positioniseverything.net):
- Comportamento para overflow (Os boxes não mais se expandem automaticamente.);
- Parser bugs: O seletor * html, o hack underscore _propriedade e o bug comentário/**/ não mais funcionam;.
- Controle select habilitado para estilização CSS;
- Auto ajuste de elementos posicionados de forma absoluta com declaração width:auto e definição das propriedades right e left (uma boa notícia para construção de layouts de 3 colunas);
- Vários bugs relacionados aos posicionamentos relativo e absoluto;
- Cálculo de porcentagens para height/width para elementos posicionados de forma absoluta http://channel9.msdn.com/ShowPost.aspx?PostID=191182
- O prólogo <?xml> não mais coloca o navegador em modo quirks;
- Elemento HTML independente de BODY (aceita seu próprio width, height etc.)
- Bordas pontilhadas de 1px não mais renderizam como tracejadas;
- Corrigida a sobreposição de margens para hover, em margens inferiores;
- Correção de vários itens para margens negativas;
- Correção de erros de cálculos em posicionamentos relativo e/ou margens negativas;
- Atributo CLASSID para tag <object> não mais limitado a 128 characters;
- Correção do bug de espaçamento para :first-letter (descrito em: http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx );
- Seletor descendente para elemento "neto" em combinação com outros seletores;
- first-line e first-letter aplica-se mesmo na ausência de espaço entre :first-line e a abertura de chaves { na escrita da regra CSS;
- Correção de comportamento de pseudo classes com relação a escrita da regra CSS;
- Seletor :link funcionando para âncoras com href definida para bookmark;
- Itens para !important;
- PositionIsEverything piefecta-rigid.htm corrigido;
- Corrigido espaço em branco para itens de lista;
- Corrigido o Absolutely Buggy II;
- Elementos posicionados de forma absoluta sempre tomam como referência o bloco de conteúdo para posicionar e dimensionar;
- Elementos nível de bloco aninhados respeitam todas as declarações (hidden, scroll, etc);
- Corrigido problemas de offset para elementos posicionados de forma absoluta quando declarados valores para os quatro lados do elemento;
- Tags <a> quando aninhadas em elementos LI não mais criam uma margem inferior extra no evento hover;
- Corrigido problema com aspecto de imagens quando do refresh da página;
- Indentações de acordo com as regras CSS2.1;
- Corrigido bugs de parseamento para seletores multi classes e seletores de classe quando combinados com seletores ID;
- E muito mais.
Ampliação de implementações já existentes com o objetivo de maior aderência às especificações do W3C:
- Habilitado :hover para todos elementos e não só para <a>;
- Implementada a declaração background-attachment: fixed para todos os elementos – agora a demonstração Eric Meyer’s complexspiral demo funciona;
- Aperfeiçoado suporte para <object>.
Finalmente, algumas funcionalidades das CSS2.1:
- Suporte para min/max width/height (inclusive para imagens, que não estavam implementadas no IE7b2);
- Bordas transparentes;
- Suporte para position: fixed;
- Suporte para seletores first-child, adjacent, attribute, child
- Alguns seletores de atributo do CSS 3 prefix, suffix e substring, mas ainda estamos trabalhando no código base (e também o seletor sibling )
- Suporte para canal alpha PNG (que embora não sendo uma funcionalidade das CSS, é muito importante e útil para os designers)
Conclusões pessoais
Contrariando o consenso quase que geral, formado inicialmente, não se pode negar que os avanços são significativos. As correções e implementações CSS para o IE7 contemplam uma lista bem extensa e até certo ponto surpreendente para aqueles que estavam esperando as previsões da maioria das matérias escritas de primeira hora.
Os bugs de posicionamento e comportamento, notadamente aqueles relatados no site P.I.E. foram todos (à exceção de um, e a lista no site é enorme!) corrigidos.
Os irritantes problemas de comportamento de elementos nível de bloco com respeito a expansão e dimensões, se foram!
Inconsistências criadas por todos os tipos de posicionamento, nunca mais!
E todos estes avanços relatados acima.
A mim surpreendeu o fato de até suporte para alguns seletores CSS3 estarem sendo considerados para implementação, pois é notório e sabido que CSS3 ainda não é e acredito não será uma realidade a curto prazo.
Palmas para o IE7.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2006-08-24 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2006/08/24/correcao-de-bugs-css-no-ie7/trackback no seu site.
o que esta errado neste código ????
@import url();
Poxa….ninguém responde não??….estou com a mesma dúvida do colega…..meu IE7 está absorvendo o comando !important do Firefox…q q eu faço agora???
Vlw pessoal…
Olá Maujor,
Estou criando um site e, para ver se tudo está em ordem, estou testanto em 3 navegadores: Firefox 3, IE 7 e Ópera 9.5. E tive alguns problemas com o IE7 e o Ópera 9.5. Por isso vou descrever o que fiz para que você ou alguém aqui possa me ajudar, pois meu prazo para entregar o site está no final.
Na realidade, criei e fatiei o layout no Fireworks, e depois montei dentro do Dreamweaver, estruturando tudo em uma tabela com largura de 760 para não dar barra de rolagem horizontal se a resolução do usuário for de 800. Criei algumas regras CSS de formatação, sendo que primeiro, para fixar as fatias das imagens, criei uma regra individual onde fixei a imagem como fundo, para depois inserir células com textos e criar links também com formatação feita em CSS. E é na hora de testar o site nos navegadores é que vem os problemas.
1) No Firefox 3 tudo aparece perfeitamente: o fundo com as imagens fatiadas fica inteiro, sem nenhuma distorção. O texto fica bem posicionado em todas as páginas e com o tipo de fonte, tamanho e comportamento do link exatamente como criei.
2) No Ópera 9.5: aparece praticamente tudo perfeito, porém, no menu, tem algumas páginas em que algumas linhas de texto do menu não ficam posicionadas à esquerda como as outras (a propriedade de alinhamento que configurei em todas os itens do menu – dentro do Dreamweaver foi: horizontal: padrão e vertical: no alto). Não sei o que acontece que em apenas umas páginas do site, algumas linhas do menu teimam em ficar centralizadas sendo que estão todas à esquerda.
3) No IE7 é que vem o grande problema:
* As regras CSS não funcionaram, pois não aparece nem fonte, tamanho e comportamento dos links, ficando tudo como padrão (Times Roman) e com “underline” embaixo. O fundo somente da fatia de imagem correspondente à área de conteúdo não aparece, assumindo apenas a cor do background.
Tenho pouco conhecimento em CSS ainda mas, sei o quanto é importante estudá-lo e por isso estou precisando muito de sua ajuda ou de quem puder me responder essa questão dos bugs, porque sei que existem mas não sei como resolver.
Esses problemas de formatação no Ópera 9.5 e no IE7 são considerados bugs? Existe algum código que eu possa inserir no HTML para resolver esses problemas?
Por favor, se alguém puder me dar uma força nessa questão, ficarei imensamente grata, porque é meu primeiro trabalho realmente profissional e ainda não tenho experiência.
Obrigada,
Hahaha, o IE7 melhorou tanto, mas tanto, que já está quase encostando no falido konqueror, em termos de CSS.
A MS se preocupa de mais com a usabilidade do navegador, visual e essas coisinhas menos importantes. Esquece que o browser serve apenas para mostrar as páginas que nós criamos, e que portanto a atenção maior deve ser voltada a quem cria as paginas, e não somente a quem visita. Doga-se de passagem que o “skin”, ficou horrivel. Prefiro o IE6, mesmo que inda jogado as traças.
Brigadaço Maujor, valeu. Vamos ver se funcionando vai ser tudo o que prometem.
Bom anteriormente eu esqueci de parabenizar o maujor por mais uma excelente matéria, como todas as outras materias ja lidas aqui! Parabéns!
Ola à todos que participam desta discussão. Sera que alguem pode me ajudar meu IE7 esta absorvendo o !important do FireFox. Sei que minha ppergunta parece um tanto “amadora” mais preciso de ajuda por favor se alguem me ajudar sei muito grato. Abração à todos.
informação demais, e objetividade falta. Com o ie7 o titulo do meu bolg está parcialmente visto no mei lap.
Como arrumar isso está sendo um problema, falta de informação objetiva para qualquer usuário.
Entrem no site do bradesco com ele e esperem o mesmo tarvar o sistema operacional. Grande porcaria.
O próximo passo dessa lista deveria ser tornar o IE7 free. Contribuiria muito para a web. E seria uma estratégia inteligente por parte deles, vide o Opera que esperou demais para fazer isso e perdeu uma fatia de usuários que usa agora o Firefox e não muda por nada.
Basta baixar o IE7 para de cara começarem os problemas, aquela chatice do Genuine da Microsoft, com certeza aquilo vai matar esse browser antes de ter nascido.
[…] A algumas semanas atrás, o engenheiro da microsoft responsável pelo IE7, fez um post para informar as correções e propriedades CSS implementadas no IE7, que vocês podem ler aqui ou traduzido aqui. […]
Eu acredito que a transição para o IE7 talvez não demore tanto tempo e seja mais rápida do que as transições feitas nas versões anteriores. Quem quiser evoluir e não quiser bugs vai mudar, e muita gente já espera por isso. Talvez, não demore muito para maioria atualizar sua versão.
Tah, mas pergunto, IE7 não eh apenas pra Service Pack 2? E quem tem Win 98, Win ME, XP basicao, …. Continua com erros, até todo mundo instalar o IE 7, ISh vai demorar…
Muito boas mudanças mesmo…
Parabéns pela matéria!
Realmente o que o Emanuel disse é verdade….a MS fala, eu pessoalmente só vou acreditar vendo!!!! Mas espero sinceramente que tudo funcione!!!
Obrigado Maujor pela bela matéria!!!
Vejo essa matéria com alegria contida, contida? mas porque? Em se tratando de Microsoft o que é dito e o que é realmente implementado acaba muitas vezes passando longe, mas uma parte da alegria é que trabalho em uma empresa que desenvolve para IE e com isso facilitará minha vida. Mas… é aquela história, vamos ver para crer… nessas horas sou que nem São Tomé. Obrigado Maujor por mais uma excelente matéria.
Admito que fiquei até surpreso com algumas correções que a Micro$oft fez no IE7, principalmente, ao suporte de PGN’s com transparência. Parece que o boicote que eles tentaram fazer não estava dando muito certo…
Bem, de qualquer forma, ainda há muito a se melhorar no IE7, mas já deu pra ver que daqui pra frente a coisa tende a melhorar.
Realmente é uma vasta lista de correções, haja visto que o browser é tão antigo que a lista não poderia ser nada diferente disso.