Teste seu conhecimento 01
Publicado em: 2006-10-24 — 23.838 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:
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
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 https://www.maujor.com/blog/2006/10/24/teste-seu-conhecimento-01/trackback no seu site.
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… 🙂
Bom, isso soluciona para fazer um separador. E para colocar o pontilhado como borda da div? Alguma solução?
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;
}
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…
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;
}
usar o IE7…
tá tudo funcionando normal aqui…
nenhuma das queixas citadas nesse post
Se colocar só o overflow:hidden ele conserta, tudo bem, mas a imagem que simula o separador não aparece!!!
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;
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 ).
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!