Percentagem elemento filho largura no pai absolutamente posicionado no Internet Explorer 7

votos
249

I tem um posicionamento absoluto divcontendo várias crianças, uma das quais é uma relativamente posicionado div. Quando eu uso uma largura baseada em percentual sobre a criança div, ele recolhe a '0' largura em Internet Explorer 7 , mas não no Firefox ou Safari.

Se eu usar pixels de largura , ele funciona. Se o pai é relativamente posicionado, a largura percentual na criança trabalha.

  1. Existe algo que eu estou ausente aqui?
  2. Existe um reparo fácil para este além da largura com base em pixel sobre a criança?
  3. Existe uma área da especificação CSS que cobre isso?
Publicado 31/07/2008 em 23:08
fonte usuário
Em outras línguas...                            


6 respostas

votos
129

O pai divprecisa ter um definido width, em pixels ou como uma porcentagem. No Internet Explorer 7, o pai divprecisa de um definido widthpor percentual criança divs para funcionar corretamente.

Respondeu 01/08/2008 em 13:22
fonte usuário

votos
53

Aqui está um código de exemplo. Eu acho que isto é o que você está procurando. Os seguintes exibe exatamente o mesmo no Firefox 3 (Mac) e 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>

Respondeu 05/08/2008 em 06:54
fonte usuário

votos
34

IE antes de 8 tem um aspecto temporal ao seu modelo de caixa que mais notavelmente cria um problema com larguras base percentuais. No seu caso aqui um absolutamente posicionado divpor padrão não tem largura. Sua largura vai ser trabalhado com base na largura de pixel do seu conteúdo e será calculado após o conteúdo são prestados. Então, no ponto IE encontra e torna a sua relativamente posicionado divseu pai tem uma largura de 0 daí porque ele próprio cai para 0.

Se você gostaria de ter uma discussão mais aprofundada deste junto com lotes de exemplos de trabalho, têm uma olhada aqui .

Respondeu 04/09/2008 em 10:02
fonte usuário

votos
30

Por que não a largura criança percentual no trabalho dos pais absolutamente posicionado no IE7?

Porque é Internet Exploder

Existe algo que eu estou ausente aqui?

Ou seja, para aumentar a consciência do seu colega de trabalho / dos clientes que o IE é uma porcaria.

Existe um reparo fácil além da largura com base em pixel sobre a criança?

Use emunidades como eles são mais útil na criação de layouts líquidos como você pode usá-los para preenchimento e margens, bem como tamanhos de fonte. Portanto, o seu espaço em branco aumenta e diminui proporcionalmente ao seu texto se ele é redimensionado (que é realmente o que você precisa). Eu não acho que percentagens dar um controle mais fino do que o EMS; não há nada para impedi-lo especificando em centésimos de ems (0,01 em) eo navegador irá interpretar como lhe aprouver.

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

Nenhum, tanto quanto eu me lembro em's e%' s foram destinados para tamanhos de fonte sozinha de volta ao CSS 1.0.

Respondeu 13/05/2009 em 08:47
fonte usuário

votos
28

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

Já experimentou o seu código no IE8 para ver se funciona lá, também? IE8 tem um Debugger ( F12) e também pode ser executado no modo IE7.

Respondeu 22/10/2010 em 17:21
fonte usuário

votos
1

As divnecessidades para ter uma largura definida:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
Respondeu 07/09/2018 em 14:53
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more