Elemento filho de porcentagem de largura no pai absolutamente posicionado no Internet Explorer 7

Eu tenho um absolutamente posicionado divcontendo vários filhos, um dos quais é relativamente posicionado div. Quando uso um percentage-based widthno filho div, ele recolhe 0 widthno IE7, mas não no Firefox ou Safari.

Se eu usar pixel width, funciona. Se o pai estiver relativamente posicionado, a porcentagem de largura no filho funcionará.

1. Há algo que estou perdendo aqui?
2. Existe uma solução fácil para isso além pixel-based widthda criança?
3. Existe uma área da especificação CSS que cubra isso?

O pai divprecisa ter um definido width, em pixels ou como porcentagem. No Internet Explorer 7, o pai divprecisa de uma widthporcentagem divs definida para funcionar corretamente.

Aqui está um código de exemplo. Eu acho que isto é o que você está procurando. A seguir, é exibido exatamente o mesmo 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 a 8 tem um aspecto temporal em seu modelo de caixa que cria, mais notavelmente, um problema com larguras baseadas em porcentagem. No seu caso aqui, um absolutamente posicionado divpor padrão não tem largura. Sua largura será calculada com base na largura de pixel do seu conteúdo e será calculada após a renderização do conteúdo. Portanto, no momento, o IE encontra e torna seu divpai relativamente posicionado com uma largura de 0; portanto, o próprio colapso para 0.

Se você quiser uma discussão mais aprofundada sobre isso, além de vários exemplos de trabalho, dê uma olhada aqui .

Por que o filho de largura percentual no pai absolutamente posicionado não funciona no IE7?

Porque é o Internet Explorer

Há algo que estou perdendo aqui?

Ou seja, aumentar a conscientização de seus colegas de trabalho / clientes de que o IE é péssimo.

Existe uma solução fácil além da largura baseada em pixels na criança?

Use as emunidades, pois elas são mais úteis ao criar layouts de líquidos, pois você pode usá-las para preenchimento e margens, além de tamanhos de fonte. Portanto, seu espaço em branco aumenta e diminui proporcionalmente ao texto, se ele for redimensionado (o que é realmente o que você precisa). Não acho que as porcentagens dêem um controle mais refinado do que o ems; não há nada para impedir que você especifique em centésimos de ems (0,01 em) e o navegador interpretará como entender.

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

Nenhum, até onde eu me lembro em,% e% foram destinados apenas ao tamanho da fonte no CSS 1.0.

Eu acho que isso tem algo a ver com a maneira como a hasLayoutpropriedade é implementada no navegador mais antigo.

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

As divnecessidades para ter uma largura definida:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>