Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Teste seu conhecimento 01

Publicado em: 2006-10-24 — 23.689 visualizacoes

Você sabe como resolver este ‘bug’ do Internet Explorer?

É amplamente sabido que o Internet Explorer 6 ou mais antigo renderiza uma borda declarada via CSS com espessura de 1px e estilo pontilhado — dotted — de maneira incorreta.
Enquanto os navegadores standards renderizam a borda pontilhada, como declarado na regra CSS, o IE6 e anteriores renderiza a borda tracejada (ou seja, como tivesse sido declarada dashed).

A seguir uma DIV para a qual foi declarada uma borda de 1px estilo pontilhado na cor vermelha:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper

Como você pode notar, dependendo do navegador que estiver usando, a borda vermelha em volta da DIV é mostrada pontilhada ou tracejada.

Vamos supor agora que você pretende colocar uma linha horizontal pontilhada separando seções (posts ou comentários por exemplo) na sua página web.
E para dar unicidade na renderização nos diferentes navegadores, você optou por usar uma imagem de fundo em uma DIV com 1px de altura, constituída de alguns pontos de 1px que se repetem na horizontal.
A seguir uma figura mostrando a imagem em tamanho ampliado. Trata-se de uma GIF com fundo transparente e 5 pontos na cor preta e de 1px. No exemplo a seguir a figura foi chamada de sep.gif

imagem de linha pontilhada ampliada

Os códigos

HTML:
<div class="bloco">
	<h2>DIV UM</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Morbi eleifend, purus quis laoreet faucibus, ante augue 		
malesuada mi, id rhoncus augue lorem eget elit. 
Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, 
commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper 
</p>
</div>

<div class="separador"></div>

<div class="bloco">
	<h2>DIV DOIS</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Morbi eleifend, purus quis laoreet faucibus, ante augue 		
malesuada mi, id rhoncus augue lorem eget elit. 
Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, 
commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper 
</p>
</div>

<div class="separador"></div>

<div class="bloco">
	<h2>DIV TRÊS</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Morbi eleifend, purus quis laoreet faucibus, ante augue 		
malesuada mi, id rhoncus augue lorem eget elit. 
Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, 
commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper 
</p>
</div>
CSS:
body {
	font: 12px/1.5  Arial, Verdana, Helvetica, sans-serif;
	}
h2 {
	font-size:14px; 
	color:#666;
	margin:0;
	}

.bloco {
	width:400px;
	border:1px solid #ccc;
	margin:30px 0;
	}
.separador {
	width:400px; 
	height:1px;
	background:#ff0 url('sep.gif') repeat-x left;
	}

Como você pode notar no código, são três DIVs da classe bloco separadas por uma linha pontilhada que foi colocada como fundo de uma DIV da classe separador.

O bug

Neste link, construi uma página mostrando a renderização do código e estilização mostradas acima. Abra a página no Internet Explorer e em um navegador standard. Observe que o Internet Explorer adiciona um espaço extra acima e abaixo da linha pontilhada que serapara as DIVs. Para destacar este espaço extra eu defini a cor de fundo amarela para a DIV que contém a linha pontilhada. Observar que em navegadores standards a cor amarela ‘aparece’ entre os pontos e no Internet Explorer acima e abaixo dos pontos.

Perguntas:
Você sabe explicar porque isto acontece?
Que ‘hack’ usar para fazer o Internet Explorer renderizar a linha sem os espaços extras e de modo idêntico a um navegador standard?

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2006-10-24 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/10/24/teste-seu-conhecimento-01/trackback no seu site.

10 comentários na matéria: “Teste seu conhecimento 01”

  1. tadaoNo Gravatar disse:

    Tiago Cerri disse:
    isso está acontecendo por causa que todos elementos no IEca tem height relativo com o tamanho da fonte (BUG) se você passar font-size:1px; ele vai intender que naquela div você quer escrever alguma coisa com o tamanho de apenas 1px

    resumino:
    .separador {
    width:400px;
    font-size:1px;
    background: #ff0 url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x left;
    }

    Tiago…, não exite “BUG do height relativo” no IE6. As fontes possuem medidas ascendentes e descendentes. A altura que vc especifica da fonte é a medida entre a base-line até o topo, na maioria das fontes as letras maiúsculas não atingem o topo por uma questão de estética, se for necessário acentuar, a letra maiúscula teria que diminuir de tamanho (fica feio!). A parte descendente (abaixo da base-line) é reservada para caracteres como ç, j e vários outros caracteres.
    Alem disso no código do maujor ele também definiu um line-height:1.5em.

    Aquele “problema” ocorre porque em CSS também existe herança (HTML é uma estrutura hierárquica) e as propriedades de fontes são herdadas pelos “filhos” (Quando você altera a fonte da classe filha, está fazendo uma sobreposição), Isto ocorre no IE6, FIREFOX, OPERA.
    Isto NÃO é um BUG, isto não é ruim, tão pouco um problema (isso ajuda muito)

    Observe:

    Os filhos de body herdarão:
    font-size:12px;
    line-height:1.5em;
    font-family:Arial, Verdana, Helvetica, sans-serif;

    CSS:
    body {
    font: 12px/1.5 Arial, Verdana, Helvetica, sans-serif;
    }
    h2 {
    font-size:14px;sobrepos o tamanho
    color:#666;sobrepos a cor
    margin:0;
    }

    .bloco {
    herdou font e color (font:inherit; color:inherit;)
    width:400px;
    border:1px solid #ccc;
    margin:30px 0;
    }
    .separador {
    herdou font e color (font:inherit; color:inherit;)
    width:400px;
    height:1px;
    background:#ff0 url('sep.gif') repeat-x left;
    }

    Mas… o nosso famigerado IE6 renderiza de maneira “diferente” as propriedades width e height de um div em dois casos:

    Conteúdo excedente e overflow diferente de hidden
    Neste caso quem determina a altura são as propriedades do conteúdo (height, margin-top, margin-bottom, padding-top, assim por diante), o mesmo vale para a largura.

    Ausência de conteúdo e overflow diferente de hidden
    Neste caso a altura da div será definida por propriedade de altura (da própria div) ou entao pela por propriedades que tem relação com a altura (font, line-height) (padding ocupa espaço na div, ser for utilizado também será gerado um excesso em outros navegadores)

    por padrão, oveflow:visible;

    é por isso que o IE6 mostra aquele fundo amarelo.
    para visualizar estes problemas utilize uma borda de inspeção.

    para 2 situações… 2 soluções!
    Como disse o Bruno:


    .separador {
    width:400px;
    height:1px;
    overflow: hidden;
    background: url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x top;
    }

    ou…


    .separador {
    width:400px;
    height:1px;
    lineheight:1px;
    background: url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x top;
    } isso vai necessitar que exista algum conteúdo dentro da div.. eu sugiro um & nbsp ;
    não recomendo esta solução... Estraga o que o CSS tem de melhor (separar programação do design)

    Agora… CSS HACK
    eu nao conheço nenhum!
    quem sabe um _overflow:hidden; mas isso nao faria sentido, não seria necessário o hack.

    Maujor mostra essa carta que você tem debaixo da manga… 🙂

  2. MarcioNo Gravatar disse:

    Bom, isso soluciona para fazer um separador. E para colocar o pontilhado como borda da div? Alguma solução?

  3. Thiago CerriNo Gravatar disse:

    isso está acontecendo por causa que todos elementos no IEca tem height relativo com o tamanho da fonte (BUG) se você passar font-size:1px; ele vai intender que naquela div você quer escrever alguma coisa com o tamanho de apenas 1px

    resumino:
    .separador {
    width:400px;
    font-size:1px;
    background: #ff0 url(‘http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x left;
    }

  4. Bruno DulcettiNo Gravatar disse:

    acabei esquecendo d falar… alem do overflow, coloquei o posicionamento do background como top… ae foi 😉

    e logicamente, tirei a cor amarela de fundo…

    talvez tenha outro modo… caso ache aki, posto…

  5. Bruno DulcettiNo Gravatar disse:

    testei isso aqui e foi tranquilo…

    .separador {
    width:400px;
    height:1px;
    overflow: hidden;
    background: url(‘http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x top;
    }

  6. MatheusNo Gravatar disse:

    usar o IE7…

    tá tudo funcionando normal aqui…
    nenhuma das queixas citadas nesse post

  7. Pedro RogérioNo Gravatar disse:

    Se colocar só o overflow:hidden ele conserta, tudo bem, mas a imagem que simula o separador não aparece!!!

  8. Thiago CerriNo Gravatar disse:

    Não sei se estou certo mais já de alguns bugs desse comigo, eu formatei o css deixando sem margin e padding igual Lucas Ferreira disse e passei font-size:1px;

  9. MicoxNo Gravatar disse:

    IE bugs pra variar.

    Há várias formas de resolver o problema.
    Testei o do Lucas Ferreira acima, e basta o overflow: hidden;

    Outra forma também é colocando um line-height:1px; e escrevendo algo dentro da div (pode ser um  ).

  10. Lucas FerreiraNo Gravatar disse:

    Explicar porque q acontece eu não sei =/

    Mas acho que com isso aqui ja resolveria não?

    overflow:hidden;
    margin: 0;
    padding: 0;

    Obs.: Nem testei, mais a logica é que o overflow ajudasse hehe

    Abraços!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo