Elemento filho com largura percentual no pai absolutamente posicionado no Internet Explorer 7

StackOverflow https://stackoverflow.com/questions/6

Pergunta

Eu tenho uma posição absolutamente div contendo vários filhos, um dos quais é relativamente posicionado div.Quando eu uso um largura baseada em porcentagem na criança div, ele é recolhido para largura '0' em Internet Explorador 7, mas não no Firefox ou Safari.

Se eu usar largura de pixels, funciona.Se o pai estiver relativamente posicionado, a largura percentual do filho funcionará.

  1. Há algo que estou perdendo aqui?
  2. Existe uma solução fácil para isso além do largura baseada em pixels na criança?
  3. Existe uma área da especificação CSS que cobre isso?
Foi útil?

Solução

O pai div precisa ter um definido width, em pixels ou como porcentagem.No Internet Explorer 7, o pai div precisa de um definido width para porcentagem infantil divs para funcionar corretamente.

Outras dicas

Aqui está um exemplo de código.Eu acho que isto é o que você está procurando.O seguinte é exibido exatamente da mesma forma no Firefox 3 (mac) e no IE7.

#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}
<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

O IE anterior ao 8 tem um aspecto temporal em seu modelo de caixa que cria principalmente um problema com larguras baseadas em porcentagem.No seu caso aqui um absolutamente posicionado div por padrão não tem largura.Sua largura será calculada com base na largura em pixels do seu conteúdo e será calculada após a renderização do conteúdo.Então, no momento em que o IE encontra e renderiza seu relativamente posicionado div seu pai tem uma largura de 0, por isso ele próprio cai para 0.

Se você quiser uma discussão mais aprofundada sobre isso, juntamente com muitos exemplos práticos, dê uma olhada aqui.

Por que o filho porcentagem de largura não se posicionou absolutamente trabalha no IE7?

Porque é o Internet Exploder

Há algo que estou perdendo aqui?

Ou seja, conscientizar seus colegas de trabalho/clientes de que o IE é uma merda.

Existe uma solução fácil além da largura baseada em pixels do filho?

Usar em unidades, pois são mais úteis ao criar layouts líquidos, pois você pode usá-las para preenchimento e margens, bem como tamanhos de fonte.Assim, o seu espaço em branco aumenta e diminui proporcionalmente ao seu texto se ele for redimensionado (que é realmente o que você precisa).Não creio que as porcentagens proporcionem um controle mais preciso do que o ems;não há nada que impeça você de especificar centésimos de ems (0,01 em) e o navegador interpretará como achar melhor.

Existe uma área da especificação CSS que cobre isso?

Nenhum, pelo que me lembro em's e %'s destinavam-se apenas a tamanhos de fonte no CSS 1.0.

Acho que isso tem algo a ver com a forma como o hasLayout propriedade é implementada no navegador mais antigo.

Você tentou seu código no IE8 para ver se funciona lá também?O IE8 tem um depurador (F12) e também pode ser executado no modo IE7.

O div precisa ter uma largura definida:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top