Prozentuale Breite Kind-Element in absolut positionierten Eltern auf Internet Explorer 7

stimmen
249

Ich habe ein absolut positioniertes divmit mehreren Kindern, von denen ein relativ positioniert ist div. Wenn ich eine verwenden Prozentbasis Breite auf dem Kind div, bricht es auf ‚0‘ Breite auf Internet Explorer 7 , aber nicht auf Firefox oder Safari.

Wenn ich Pixelbreite , es funktioniert. Wenn die übergeordneten relativ positioniert ist, arbeitet die prozentuale Breite auf dem Kind.

  1. Gibt es etwas, das ich hier fehlt?
  2. Gibt es eine einfache Lösung für dieses neben der Pixel-basierten Breite auf das Kind?
  3. Gibt es einen Bereich der CSS-Spezifikation, die diese abdeckt?
Veröffentlicht am 31/07/2008 um 23:08
quelle vom benutzer
In anderen Sprachen...                            


6 antworten

stimmen
129

Die Mutter divmuss eine definierte width, entweder in Pixel oder als Prozentsatz. In Internet Explorer 7, die Mutter divmuss eine definierte widthfür Kinder Prozentsatz divs richtig zu arbeiten.

Beantwortet am 01/08/2008 um 13:22
quelle vom benutzer

stimmen
53

Hier ist ein Beispielcode. Ich denke, das ist das, was Sie suchen. Folgende Anzeigen 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>

Beantwortet am 05/08/2008 um 06:54
quelle vom benutzer

stimmen
34

IE vor 8 einen zeitlichen Aspekte seines Box - Modell , das vor allem ein Problem mit Prozentsatzbreiten erzeugt. In Ihrem Fall hier ein absolut positioniert divhat standardmäßig keine Breite. Seine Breite wird auf dem Pixel basiert Breite ihres Inhalts ausgearbeitet und wird berechnet , nachdem der Inhalt wiedergegeben werden. Also an dem Punkt IE trifft und macht Ihre positioniert relativ divMutter eine Breite von 0 hat also warum es sich zusammenfällt 0 bis.

Wenn Sie eine eingehende Diskussion über diese zusammen mit vielen Arbeitsbeispielen mögen, haben Sie einen Blick hier .

Beantwortet am 04/09/2008 um 10:02
quelle vom benutzer

stimmen
30

Warum funktioniert das prozentuale Breite Kind in absolut positionierte Elternarbeit in IE7?

Weil es Internet Exploder

Gibt es etwas, das ich hier fehlt?

Das heißt, Ihre Mitarbeiter / der Kunden das Bewusstsein zu schärfen, die IE saugt.

Gibt es eine einfache Lösung neben der Pixel-basierte Breite auf dem Kind?

Verwenden Sie emEinheiten , da sie mehr nützlich sind , wenn Flüssigkeit Erstellung von Layouts , wie Sie sie für Polsterung und Margen sowie Schriftgrößen verwenden können. So Ihr weißer Raum wächst und schrumpft proportional zu Ihrem Text , wenn es geändert wird (was wirklich ist , was Sie brauchen). Ich glaube nicht , Prozentsatz eine feinere Kontrolle als ems geben; es gibt nichts , was man in Hundertsteln ems (0,01 em) und der Browser Angabe zu stoppen interpretieren , wie es für richtig hält.

Gibt es einen Bereich der CSS-Spezifikation, die diese abdeckt?

Keine, soweit ich mich erinnern em‚s und%‘ s wurden für Schriftgrößen bestimmt allein zurück in CSS 1.0.

Beantwortet am 13/05/2009 um 08:47
quelle vom benutzer

stimmen
28

Ich denke , das etwas mit der Art und Weise zu tun hat die hasLayoutEigenschaft in dem älteren Browser implementiert ist.

Auch haben Sie Ihren Code in IE8 versucht dort , wenn Werke zu sehen? IE8 hat einen Debugger ( F12) und kann auch im IE7 - Modus.

Beantwortet am 22/10/2010 um 17:21
quelle vom benutzer

stimmen
1

Die divBedürfnisse haben eine definierte Breite:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
Beantwortet am 07/09/2018 um 14:53
quelle vom benutzer

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