Internet Explorer 7'de kesinlikle konumlandırılmış üst öğedeki genişlik alt öğesi yüzdesi

Kesinlikle divbirkaç çocuk içeren bir konumum var , biri nispeten konumlandırılmış div. Ben kullandığınızda percentage-based widthçocuğa div, bu şekilde daralır 0 widthFirefox veya Safari üzerinde IE7 üzerinde değil.

Eğer kullanırsam pixel widthçalışır. Ebeveyn nispeten konumlandırılmışsa, alt öğe üzerindeki yüzde genişliği çalışır.

1. Burada özlediğim bir şey var mı?
2. pixel-based widthÇocuğun yanında bunun için kolay bir düzeltme var mı ?
3. CSS spesifikasyonunda bunu kapsayan bir alan var mı?

Ebeveynin , piksel cinsinden veya yüzde olarak divtanımlanmış olması gerekir width. Internet Explorer 7'de, üst yüzde alt öğelerin düzgün çalışması için üst öğenin divtanımlanmış widtholması gerekir div.

İşte bazı örnek kod. Bence aradığınız şey bu. Aşağıdakiler Firefox 3 (mac) ve IE7'de tamamen aynıdır.

#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>

8'den önceki IE, kutu modeline geçici olarak, özellikle yüzde tabanlı genişliklerle ilgili bir sorun yaratan bir özelliğe sahiptir. Sizin durumunuzda, burada divvarsayılan olarak kesinlikle konumlandırılmış bir genişlik yoktur. Genişliği, içeriğinin piksel genişliğine göre çalışılacak ve içerik oluşturulduktan sonra hesaplanacaktır. Bu noktada IE, göreceli olarak konumlandırdığınız divüst öğesinin ana genişliği 0'a sahiptir ve bu nedenle neden 0'a çöker.

Eğer çalışma örnekler sürü ile birlikte bu daha derinlemesine konuşmak isterseniz, bir kaz burada .

Kesinlikle konumlandırılmış üst öğedeki genişlik yüzdesi IE7'de neden çalışmıyor?

Internet Explorer olduğu için

Burada özlediğim bir şey var mı?

Yani, iş arkadaşınızın / müşterilerinizin IE'nin berbat olduğu konusundaki farkındalığını artırmak.

Çocukta piksel tabanlı genişliğin yanı sıra kolay bir düzeltme var mı?

emSıvı mizanpajları oluştururken, dolgu ve kenar boşluklarının yanı sıra yazı tipi boyutlarında da kullanabileceğiniz için birimleri daha kullanışlı oldukları için birimleri kullanın . Böylece beyaz alanınız yeniden boyutlandırılırsa metninizle orantılı olarak büyür ve küçülür (gerçekten ihtiyacınız olan şey budur). Yüzdelerin EMS'den daha iyi bir kontrol sağladığını düşünmüyorum; Yüzlerce ems (0.01 em) cinsinden belirtmenizi engelleyecek bir şey yoktur ve tarayıcı uygun gördüğü şekilde yorumlayacaktır.

CSS spesifikasyonunda bunu kapsayan bir alan var mı?

Hiçbiri, hatırladığım kadarıyla em's ve%' ler sadece CSS 1.0'da yazı tipi boyutlarına yönelik değildi.

Bu hasLayoutözellik eski tarayıcıda uygulanma şekli ile ilgili bir şey olduğunu düşünüyorum .

IE8'de de orada çalışıp çalışmadığını görmek için kodunuzu denediniz mi? IE8'de bir Debugger ( F12) vardır ve IE7 modunda da çalışabilir.

divİhtiyaçları tanımlanmış genişliğe sahip olacak:

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