Publicado em 16 de jun.

Como contornar problemas do IE

Um salve a comunidade!

Gostaria de fazer uma pergunta bem direta e simples.

Estou com problemas de compatibilidade do meu codigo css entre navegadores. Minha duvida é: Qual a melhor forma de contornar esses problemas?

Só para explicar melhor, todos sabem que os IEs renderizam as bordas das divs para dentro enquanto outros navegadores renderizam-a para fora, o que gera um sério (sim é sério) problema com tamanhos fixos. Isso me deu dor de cabeça e a principio eu sei resolve-lo, mas gostaria de saber qual seria a melhor forma.

Bem... Eu ja pensei em alguns metodos. A primeira delas seria utilizando JavaScript e um pouco de jQuery. Identificaria o navegador e adicionaria 2x o tamanho da borda ao tamanho da div caso fosse IE (e caso a div tivesse borda, se não ficaria no tamanho normal). (É praticamente criar um hack...)

Depois eu pensei em spacers. Utilizar spacers entre as divs para corrigir esse problema com tamanhos e bordas. (Mas isso "sujaria" meu código...)

Por fim eu pensei em criar folhas de estilos especificas. Uma para cada browser e utiliza-las conforme o navegador do usuário.

Essa ultima foi a que me pareceu mais razoavel, mas eu sinceramente não sinto segurança em aplicar qualquer uma dessas alternativas por que me parece meio... Gambiarra, entendem?

Gostaria de opniões e sugestões de outras formas para contornar esse e outros possiveis problemas de compatibilidade entre navegadores.

Valeu galera!

Aquele forte abraço!

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 16 de jun.

>
Estou com problemas de compatibilidade do meu codigo css entre navegadores. Minha duvida é: Qual a melhor forma de contornar esses problemas?

depende especificamente de qual é o problema.a maioria dos tópicos aqui no fórum sobre 'incompatibilidade', na verdade é por causa de erros dos desenvolvedores, e não por causa de diferenças entre os browsers.

Só para explicar melhor, todos sabem que os IEs renderizam as bordas das divs para dentro enquanto outros navegadores renderizam-a para fora, o que gera um sério (sim é sério) problema com tamanhos fixos. Isso me deu dor de cabeça e a principio eu sei resolve-lo, mas gostaria de saber qual seria a melhor forma.

hum... de qual versão do IE estamos falando ?apartir da versão 6, isso já não é mais 'verdade', já que com a declaração do DOCTYPE, ele sai do quirks mode, e passa a renderizar de forma mais standard.

na minha opinião, simplesmente nenhum desses teus métodos.

não precisamos mais nos preocupar com a familia 5.x e anteriores, já que o próprio windows 98 se, já vem com ie6 instalado. E programar para ie6, nem é 'tão difícil', qnto pregam por ai.

dicas:

use um doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="pt-br" lang="pt-br">
<head>use um css reset básico * { margin: 0; padding: 0; }só nisso, já eliminamos várias diferenças, e evitamos vários problemas.valide o teu documento

http://validator.w3.org

e cara, apenas faça hacks, contornos, malabarismos para 'diferenças entre algum browser e o ie' se e somente se, se tratar de um bug realmente, que já é bem documentado, como margins duplas, position fixed, png não transparentes..

essas coisas, para todas as outras primeiro, se culpe, assuma a responsabilidade, e veja se o erro não foi seu ^_^

AcquaBlue· 16 de jun.

Uhhhhm... Interessante...

Concordo com você William, eu sempre me culpo pelos problemas antes de atribuir a culpa aos navegadores. Mas nesse caso em especifico eu fiz uma pesquisa (vou ser sincero que ela foi meio rasa visto que estou terminando um projeto e estou buscando por soluções de vários problemas) e não cheguei a resultado algum.

Acabei de fazer o teste com o seu codigo e...

Uow... Então... Não resolveu e por um acaso truncou todo o layout no Firefox e no Chrome, enquanto que o IE (8 em questão) se manteve com as bordas renderizadas para dentro:

A div "container" possui tamanho fixo que é dado por 981px + 2px de borda, que possui internamente em uma linha 7 divs cada uma com 138px de largura + 2px de borda, o que resultam em 980px que garantem 1px de espaço que é previsto para dar ao container um efeito relevo sem a necessidade de se criar mais uma borda, ou engrossar a do container.

Contuto, o IE8 esta renderizando o container com 981px de largura e bordas internas e o mesmo para as 7 divs, criando um espaço em branco ao lado esquerdo do container de 13px (7*138 - 2px da borda interna do container) e o Firefox e o Chrome truncaram agora sem motivo aparente, mas vou adapta-los ao doctype que você me passou.

Incrivelmente o meu CSS ja tem sido validado desde o momento em que eu comecei o projeto, e ambas as css (mas a que interessa é uma delas, a que é usada nas paginas internas do projeto) estão perfeitas, validadas e sem warnings.

Estou avaliando o codigo minuciosamente agora para ver o que pode ser.

De qualquer forma William, valeu pela dica ai cara... Me deu uma bela clareada na direção q eu devo seguir! ;)

Forte abraço brother!

William Bruno· 16 de jun.

^_^ então cara, posta um link para o site ai, para podermos avaliar melhor onde é o grande problema, e esse fato da caixa estar com diferenças de largura, realmente é algum erro teu...