Der Unterschied zwischen CSS width:100% und width:auto

Der Unterschied zwischen CSS width:100% und width:auto

1. Problem

Als ich vor einiger Zeit die Baumstruktur angepasst habe, habe ich festgestellt, dass bei relativ langen Knotennamen des Baums die äußeren Elemente unter IE6 nicht geöffnet werden, sodass nur die Hälfte des Knotennamens geöffnet wird angezeigt werden, sowie das Symbol und der Name, die umbrochen werden sollen. Es wird angezeigt, aber unter IE8 und IE9 wird es normal angezeigt. Nachdem wir das Problem lokalisiert hatten, stellten wir schließlich fest, dass es durch die folgenden Attribute verursacht wurde, wie im Bild unten rot dargestellt, kann das Problem gelöst werden:

 

.TreeView,.TreeView ul{ 

    padding:0px 0px 0px  19px; 

    list-style:none; 

    margin:0px 0px; 

    width:100%;/*这里修改为auto*/ 

    background:url(./trstree-default-line.gif)  repeat-y 0px  center ;

}

 

.TreeView,.TreeView ul{

Auffüllung :0px 0px 0px 19px;

list-style:none; margin:0px 0px;

width:100% ;/*Hier wechseln zu automatisch*/

Hintergrund:url(./trstree-default-line.gif) repeat-y 0px center ;

} 2. Fazit [1] width:100% beinhaltet nicht den Attributwert von margin-left und margin-right. Es übernimmt direkt die Breite seines übergeordneten Containers plus margin-left /margin – Der Wert von right. Wenn der Rand festgelegt ist, entspricht der neue Breitenwert der Breite des Containers plus dem Randwert. (Beobachten Sie sorgfältig.) Sie werden feststellen, dass die entsprechende Seite mehr Leerraum aufweist, wenn ein Rand hinzugefügt wird. Und es wird mehr horizontale Bildlaufleisten geben, da die Breite den Bildschirmumfang überschreitet. (Dies ist der Körper relativ zum übergeordneten Container). [2] width:auto enthält den Attributwert von margin-left/margin-right. Sein Wert enthält die Werte von margin-left / margin-right. width:auto belegt immer die gesamte Zeile ! ! ! Der Randwert ist bereits enthalten (d. h. eine ganze Zeile). Wenn Sie den Randwert festlegen möchten, verwenden Sie eine ganze Zeile und subtrahieren Sie dann den Randwert, um die aktuelle Breite zu erhalten. Der subtrahierte Wert ist das Leerzeichen der entsprechenden Seite. Das bemerkenswerte Merkmal ist, dass keine horizontale Bildlaufleiste angezeigt wird, d. h. die Breite nimmt nicht zu. [3] Die Anzeige ist unter IE6 nicht normal, wird aber unter IE8 und IE9 normal angezeigt. Dies kann daran liegen, dass IE8 und IE9 die Breite zu 100 % unterschiedlich analysieren aus IE6, aber die beiden Parsing-Werte width:auto sind konsistent.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen CSS width:100% und width:auto. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!