Ir para conteúdo
Fórum Script Brasil
  • 0

Hacks para consertar erros de renderização nos IEs

Diego_Bittencourt

Perguntado por Diego_Bittencourt,

 Share

Pergunta

Diego_Bittencourt

Diego_Bittencourt

Postado
Postado (editado)

Estou postando aqui nessa área porque não encontrei tópico específico e é muito importante. (:

Se, por exemplo, algum objeto saiu com a margem desalinhada no IE (não é tão difícil acontecer isso, hein ;)

div.box {
_margin: 5px;
}
Todos os navegadores irão ignorar essa propriedade, exceto o IE6. 
div.box {
*margin: 5px;
}

Todos os navegadores irão ignorar essa propriedade, exceto o IE6 e 7.

Está aí uma dica que alguns desconhecem.

Ah, só pra lembrar, evite de usá-las em excesso, por mais que seja um hack muito bom e o IE um verdadeiro lixo, pois desorganizará seu CSS e vai te confundir =)

Mas, não dê ouvidos a quem acha que todo santo CSS bem escrito precisa ser 100% validado pelo W3C, esses hacks obviamente não são validados. Mas vale por aquele site lindo que você fez e que vai rodar perfeitamente em todos os Browsers e tem folha de estilos 99% validada.

"O validador de CSS, costuma estranhar algumas declarações de CSS2 e CSS3, estranha alguns hacks antigos para o Internet Explorer e os hacks para o Opera. Por isso não necessariamente uma folha de estilos “validada” diz que você não terá nenhum erro de renderização nem que você é bom em CSS. Não confunda caçarolinha com caçar rolinha!

- Revolução Etc

Editado por Diego_Bittencourt
Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
hipnos na area

hipnos na area

Postado
Postado (editado) 

*margin-right:15px;
IE6 e IE7 -------------------------- 
_margin-right:14px;
IE6 ------------------------------------- 
/* commented backslash hack for mac-ie5 */
seletor { margin-right:12px }
/* end hack */
IE5 Mac ------------------------------ 
margin-right:13px !important;
Firefox Ps.: esse !important na verdade não é um HACK, ele é usado em para herdar "valores" junto ao inherit usamos ele como "HACK" no FIREFOX pois se você fizer isso 
width:200px !important;
width:150px;

o Firefox simplismente ignora o segundo width que possue 150px

Dando uma implementada beleza Diego??

abraço ;)

Editado por hipnos na area
Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

É...olha, eu nunca usei hacks...vou ser bem sincero.

Eu acho bom uma boa pesquisa sobre o assunto, onde e quando usar. Na verdade essa seria a maior das dicas, já que em todo o site que vejo, só mostra como fazer.

O interessante notar é que os hacks são usados quase sempre sem precisar!!!! Em caso de redimensionamento de divs como deu no primeiro exemplo, NUNCA é necessário usar hacks, já que no caso o problema vai ocorrer no ie6 sempre. É só usar os seletores válidos que o iE 6 não enxerga, ex:

#menu{margin:2px}

#site>#menu{ margin:5px}

O fato é que, os navegadores estão ficando cada dia mais nos padrões. Salvo de alguns bugs, e em raríssimos casos ( e estes, seriam a verdadeira dica se descritos ), na maoria esmagadora das vezes precisamos consertar o que o ie6 deveria fazer, ou os ies anteriores.

Tenho montado a maioria dos meus sites usando liquid layout, e com porcentagem a maioria dos browsers funciona muito bem.

De qualquer maneira, gostaria que fosse feito uma pesquisa sobre hacks, onde e quando usar, acho que esse tipo de conteúdo é que está faltando.

Claro que não é preciso que sempre seja 100% dos casos o css validado. Porém, em "1000%" dos casos poderiam ser validados se houvesse mais estudo, experiência e se o desenvolvedor pensasse mais nos códigos.

Isto, porque muitos usam hacks na primeira dificuldade que encontram, e o bom desenvolvedor escolhe sempre a melhor alternativa, que pra muitos pode ser a mais complicada.

Link para o comentário
Compartilhar em outros sites
  • 0
hipnos na area

hipnos na area

Postado
Postado (editado)

isso é verdade ^^

e eu faço como você o disse Kakarotto busco sempre a melhor alternativa

usando HACKs somente quando extremamente necessario

mas você já viu os IEs do MAC??

hehe

eu exemplo usei HACKs para simular um efeito do qual o navegador IE6 não possuia

o POSITION:FIXED;, mas percebi que havia uma maneira para burlar esse problema

que não seria um HACK e funcionaria para a maioria dos navegadores que trabalham bem

com porcentagem(como você disse praticamente não há problemas com porcentagem)

<html>
<head>
<style>
html,body{
overflow:hidden;
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#corpo{
overflow:auto;
width:100%;
height:100%;
}
#Fixo{
position:absolute;
top:50px;
left:150px;
background:#fc0;
width:50px;
}
</style>
</head>
<body>
<div id="fixo"><p>fixo</p></div>
<div id="corpo">
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
</div>
</body>
</html>[/codebox]

uma ideia livre de HACKs =)

mas lembre-se a casos que HACKs são mesmo necessarios

Editado por hipnos na area
Link para o comentário
Compartilhar em outros sites
  • 0
Diego_Bittencourt

Diego_Bittencourt

Postado
  • Autor
Postado (editado)

Boa Hipnos, eu esqueci do !important mesmo (apesar de não ser hack, como você mencionou), que quebra o efeito em cascata.

Valeu hein, cara ;), e sobre seu segundo post, concordo plenamente com você!

E KaKarotto, provavelmente foi pra mim o post, deixe-me falar uma coisa: o fato de ter postado a dica, não quer dizer que eu saia usando exageradamente, se fosse assim, eu postaria o Holy Hack e outros famosos que rolam por aí. Eu sei o que são padrões web sim, boas maneiras de codificação, e procuro não sair usando "quase sempre sem precisar"! O problema é que existem sim problemas de renderização no IE6 e váááárias coisas ele renderiza errado, e as vezes, quando não houver solução válida, é necessário usar um ou outro hack. Tanto que a própria Microsoft admite que o IE 6 é um lixo e está procurando desenvolver com mais pesquisas relacionadas aos padrões web!

Eu só precisei usar hack uma vez em tudo que eu já desenvolvi, eu tentei várias soluções válidas e não deu certo. Eu prefiro estar com o CSS 99% válido do que quebrar um princípio da acessibilidade, já que o IE6 ainda é muito usado (infelizmente). Sobre validação, ele só checa a sintaxe, não a semântica, o porquê de ter usado tal propriedade. Eu estou falando sobre essa questão de validação depois de ler alguns artigos do Henrique do Revolução Etc e alguns blogueiros conceituados.

Só pra terminar, o caso que eu citei da margem da div, foi só pra mostrar o * ou _ em algum elemento (apesar de ter citado o div), não quer dizer nada. Acho que você deveria reler e saber interpretar um pouquinho melhor. (:

Editado por Diego_Bittencourt
Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Oi Diego. Saber interpretar e ler é o que eu mais sei fazer. Acho que quem não interpretou direito foi você. Leia e releia meu post 2, 3, 4 vezes se for necessário, eu deixo rsrsrs.

Interpretou errado de novo porque achou que falei para você...Leia de novo e vai ver que nem mencionei seu nome, falei dos desenvolvedores em geral.

Não interpretou direito porque não falei que não deveria usar hacks, falei que em muitos casos seu uso não é necessário.

Interpretou errado porque quando eu dei o exemplo, dei para que quem pensa usar, ver que há sempre alguma outra solução, embora você saiba que hacks não deva ser usado para o margin, você esquece que o post pode ser lido por alguém que não saiba disso.

Não interpretou direito porque achou que foi uma crítica. Leia de novo, não foi. Eu apenas propus que pesquisasse sobre quando e onde usar os hacks, para incrementar seu post, pois como eu disse, a maior dica seria onde usá-los.

Esta foi a segunda e última vez que dou opinião em posts, percebi agora que estou lidando com pessoas menos maturas, que apenas querem ser elogiados, não havendo espaço para críticas apenas para o que querem ler.

O hipnos mesmo criticou um dos meus posts (da assinatura), e a crítica dele foi extremamente importante pra eu deixar o meu post melhor, é uma questão de humildade, não li o post dele como uma afronta, deveria fazer o mesmo.

E....não me subestime...eu leio muito mais do que pensa, posso ter muitos defeitos, mas não saber ler, não é um deles. A propósito o Henrique é sem dúvida conceituadissimo, mas você deve seguir sua diretriz, ter seus conceitos, e não ler apenas um blog, Revolução Etc é apenas um dos blogs que acompanho.

Link para o comentário
Compartilhar em outros sites
  • 0
Diego_Bittencourt

Diego_Bittencourt

Postado
  • Autor
Postado (editado)

Eu não lembro de ter dito que só acompanho o blog do Henrique e muito menos sigo tudo que ele escreve: eu citei apenas como referência. Ou disse? =/ Isso porque você é bom em interpretação, imagina se não :D

Eu não vou nem citar algumas contradições porque não quero que isso se torne uma discussão de 3 páginas, isso seria perder tempo e não chegar a lugar algum.

Mas só pra lembrar: em vários artigos do A List Apart, por exemplo, os autores precisaram usar algum tipo de hack para o maldito IE6 (que até no seu lançamento já era considerado desatualizado em sua egine), ou do Maujor (aqui do Brasil). Isso pode ser por que não pensaram antes em outra solução? Não sei, mas ainda sim todos eles são profissionais requisitados pelo o que pude ver, e sempre citados como referência em padrões web, css, e por aí vai. E é claro que é muito bom você nunca ter usado hacks, mas talvez quando precisar de algo um pouco mais complexo (não estou querendo dizer que você desenvolve coisas básicas, tá?) você precise de algo como um Hollyhack, se for por exemplo um layout complexo e tudo mais.

De fato, o hack do meu primeiro post eu nunca precisei usar, na verdade, só uma vez, apenas para o IE6, para alinhação de formulários em listas ordenadas (sim, eu uso listas ordenadas para estruturar formulários), sendo que eu já tinha resetado os margins e paddings e mais outras coisas de todos elementos. O IE6 é um lixo de browser, mas como é bastante usado, prefiro que as coisas sejam exibidas na mesma forma que o Firefox, Opera e outros (excelentes browsers que nunca tive problemas, por exemplo), mesmo as que não interferem na funcionalidade, mas de qualquer forma é realmente uma pena ter de usar um artifício especialmente pro IE6, que outros browsers vão ignorar. Por isso, eu até negritei o meu primeiro post agora em "evite de usá-las em excesso" :B

Enfim, sem mais discussões, cada um tem sua filosofia de projeto, o que importa são os Padrões web!

=)

Editado por Diego_Bittencourt
Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...