Publicado em 30 de jul.

IE não tem elasticidade em standards

Olá pessoal, pra me fazer entender bem vou colocar um exemplo:

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

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
	<head>
	<style type="text/css">
 #d1 {
 position: relative;
 width: 90%;
 height: 200px;
 padding: 5%;
 background-color: #220;
 font-family: Verdana, Helvetica, sans-serif;
 font-size: 15px;
 }
 #d2 {
 position: relative;
 width: 96%;
 height: 92%;
 padding: 2%;
 background-color: #20F;
 overflow: auto;
 }
 #d3 {
 position: relative;
 width: 100%;
 height: 10px;
 background-color: #F0F;
 }
	</style>
	</head>
	<body>
	<div id="d1">
 <div id="d2">
 <div id="d3"></div>
 Ahhhhhhhhhhhhhhhhhhh!!!!!!!!!
 <br/><br/><br/><br/><br/><br/><br/><br/>
 Ahhhhhhhhhhhhhhhhhhh!!!!!!!!!
 </div>
	</div>
	</body>
</html>Se abrirem isso no IE e FF em ambos vai ficar idêntico.Então esperimentem adicionar mais um <br/> ali onde já tem alguns e reparem a diferença entre os navegadores.

Quando cria a barra de rolagem, no FF o div d3 que tem 100% do tamanho diminui de acordo com o espaço ocupado pela barra de rolagem, no IE isso não acontece, ele interpreta o tamanho total do seu pai sem diminuir o tamanho ocupado pela barra de rolagem, o que gera problemas.

Em modo quirks no IE isso funciona, em modo standard não.

Sabem de algum modo pra resolver isso?

Obrigado pela atenção.

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Luciano De Maria· 30 de jul.

Como você colocou 2% de padding, deixando 98% de largura, só no IE, deixa o resultado "quase lá" (não pixel-perfect, mas bom):

#d3 {
 position: relative;
 width: 100%;
 *width: 98%; /* hack "rapidinho" pra pegar só no IE */
 height: 10px;
 background-color: #F0F;
 }

yetiH· 31 de jul.

Obrigado pela ajuda.

Interessante, mas aí quando não tem barra de rolagem o tamanho do div fica menor, ou seja, está sempre em 98%.

Eu precisaria que ele fosse elástico, diminuindo apenas quando a barra de rolagem é criada.

yetiH· 31 de jul.

Olá, a princípio resolvi meu problema assim:

#d2 {
 position: relative;
 width: 96%;
 height: 92%;
 padding: 2%;
 background-color: #20F;
 overflow: auto;
 overflow-x: hidden;
 }Adicionando o **overflow-x: hidden;** o que não fazer com que o conteúdo diminua se houver barra de rolagem, mas pelo menos não vai criar a barra de rolagem horizontal.