Untergeordnetes Element mit prozentualer Breite im absolut positionierten übergeordneten Element in Internet Explorer 7

Ich habe eine absolut positionierte divmit mehreren Kindern, von denen eines relativ positioniert ist div. Wenn ich a percentage-based widthfür das Kind verwende div, wird es 0 widthauf IE7 reduziert, jedoch nicht auf Firefox oder Safari.

Wenn ich benutze pixel width, funktioniert es. Wenn der Elternteil relativ positioniert ist, funktioniert die prozentuale Breite des Kindes.

1. Fehlt mir hier etwas?
2. Gibt es eine einfache Lösung dafür neben pixel-based widthdem Kind?
3. Gibt es einen Bereich der CSS-Spezifikation, der dies abdeckt?

Der Elternteil divmuss eine Definition haben width, entweder in Pixel oder als Prozentsatz. In Internet Explorer 7 divbenötigt der Elternteil einen widthfür Kinder definierten Prozentsatz div, um ordnungsgemäß zu funktionieren.

Hier ist ein Beispielcode. Ich denke, das ist es, wonach Sie suchen. Das Folgende wird in Firefox 3 (Mac) und IE7 genau gleich angezeigt.

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

IE vor 8 hat einen zeitlichen Aspekt in seinem Box-Modell, der vor allem ein Problem mit prozentualen Breiten verursacht. In Ihrem Fall hier hat eine absolut positionierte divstandardmäßig keine Breite. Seine Breite wird basierend auf der Pixelbreite seines Inhalts berechnet und nach dem Rendern des Inhalts berechnet. An diesem Punkt trifft der IE auf Ihre relativ positionierte divübergeordnete Position und macht sie so, dass sie selbst auf 0 kollabiert.

Wenn Sie eine ausführlichere Diskussion darüber mit vielen Arbeitsbeispielen wünschen, schauen Sie hier .

Warum funktioniert das Kind mit der prozentualen Breite in absolut positionierten Eltern in IE7 nicht?

Weil es Internet Explorer ist

Fehlt mir hier etwas?

Das heißt, um das Bewusstsein Ihrer Mitarbeiter / Kunden dafür zu schärfen, dass IE scheiße ist.

Gibt es neben der pixelbasierten Breite des Kindes eine einfache Lösung?

Verwenden Sie emEinheiten, da diese beim Erstellen flüssiger Layouts nützlicher sind, da Sie sie zum Auffüllen und für Ränder sowie für Schriftgrößen verwenden können. Ihr weißer Raum wächst und schrumpft proportional zu Ihrem Text, wenn die Größe geändert wird (was wirklich das ist, was Sie brauchen). Ich denke nicht, dass Prozentsätze eine feinere Kontrolle geben als ems; Nichts hindert Sie daran, Hundertstel von ems (0,01 em) anzugeben, und der Browser interpretiert nach Belieben.

Gibt es einen Bereich der CSS-Spezifikation, der dies abdeckt?

Soweit ich mich erinnere em, waren keine und% für Schriftgrößen allein bei CSS 1.0 vorgesehen.

Ich denke, das hat etwas mit der Art und Weise zu tun, wie die hasLayoutEigenschaft im älteren Browser implementiert wird.

Haben Sie Ihren Code in IE8 ausprobiert, um festzustellen, ob er auch dort funktioniert? IE8 hat einen Debugger ( F12) und kann auch im IE7-Modus ausgeführt werden.

Die divmuss eine definierte Breite haben:

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