Prozentsatz der Breite untergeordnete element absolut positioniert Eltern auf Internet Explorer 7

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

Frage

Ich habe ein absolut positioniertes div mit mehreren Kindern, von denen eines relativ positionierten div.Wenn ich mit einem prozentuale Breite auf das Kind div, es bricht auf '0' width auf Internet Explorer 7, aber nicht in Firefox oder Safari.

Wenn ich benutze Breite in pixel, es funktioniert.Wenn der andere Elternteil ist relativ positioniert, der Prozentsatz der Breite auf das Kind funktioniert.

  1. Gibt es etwas, das fehlt mir hier?
  2. Gibt es eine einfache Lösung für dieses Problem außer den pixel-basierte Breite auf der Kind?
  3. Gibt es einen Bereich der CSS-Spezifikation, die deckt dies?
War es hilfreich?

Lösung

Die Eltern div muss einen definierten width, entweder in Pixeln oder als Prozentsatz.In Internet Explorer 7, die Eltern div muss eine definierte width für den Kind-Anteil divs um korrekt zu arbeiten.

Andere Tipps

Hier finden Sie einige Beispiel-code.Ich denke, das ist, was Sie suchen.Die folgende zeigt genau das gleiche in Firefox 3 (mac) und 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>

IE vor 8 hat einen zeitlichen Aspekt seiner box-Modell, dass vor allem schafft Sie ein problem mit dem Prozentsatz der Breite.In Ihrem Fall ist hier ein absolut positioniert div standardmäßig hat keine Breite.Seine Breite wird erarbeitet auf der Grundlage der pixel-Breite von Inhalt und wird berechnet, nachdem der Inhalt gerendert werden.Also an der Stelle, DH auf und macht Ihren relativ positioniert div seine Eltern hat eine Breite von 0, also warum es sich bricht auf 0.

Wenn Sie möchten, eine mehr in die Tiefe Diskussion dieser und viele Anwendungsbeispiele, haben Sie einen Blick hier.

Warum nicht das prozentuale Breite Kind bei absolut positionierten übergeordneten Arbeit in IE7?

Weil es Internet Exploder

Gibt es etwas, das fehlt mir hier?

Das ist zu erhöhen und Ihrem co-Arbeiter / Kunden das Bewusstsein, dass IE nervt.

Gibt es eine einfache Lösung neben der pixel-basierten Breite auf das Kind?

Verwenden em Einheiten sind mehr nützlich bei der Erstellung von Flüssigkeit layouts, wie Sie Sie verwenden können für Polsterung und Ränder sowie Schriftgrößen.Damit Ihre weißen Raum wächst und schrumpft proportional zu Ihrem text, wenn er geändert wird (das ist wirklich das, was Sie brauchen).Ich glaube nicht, dass die Prozentsätze geben Sie eine feinere Kontrolle als ems;es gibt nichts zu stoppen Sie die Angabe in Hundertstel ems (0.01 em) und der browser interpretiert wird, wie es gerade passt.

Gibt es einen Bereich der CSS-Spezifikation, die deckt dies?

Keiner, soweit ich mich erinnere em's" und " %'s waren bestimmt für Schriftgrößen allein zurück auf CSS 1.0.

Ich denke, das hat etwas zu tun mit der Art und Weise der hasLayout Eigenschaft implementiert wird, die in den älteren browser.

Haben Sie versucht, Ihren code in IE8 zu sehen, wenn funktioniert es auch?IE8 hat einen Debugger (F12) und können auch im IE7-Modus.

Die div braucht, um eine definierte Breite:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top