Warum schrumpft meine nicht wie erwartet? Es scheint ein nicht entfernbares Problem mit der Mindestbreite und dem Mindestinhalt zu geben.

wird nicht wie erwartet verkleinert; es scheint eine nicht entfernbare Mindestbreite zu geben: Mindestinhalt

Problem

Ich habe einen und einer der hat einen sehr langen Textwert. Ich möchte, dass nie breiter als sein übergeordnetes Element wird, auch wenn der Anzeigetext gekürzt werden muss. max-width: 100 % sollte ausreichen.

Erwartete Ergebnisse

Problemumgehung

Aktualisiert (25. September 2017)

Der unten beschriebene Firefox-Fehler wurde in Firefox 53 behoben und der Link zu dieser Antwort wurde aus der Bootstrap-Dokumentation entfernt.

Außerdem möchte ich mich aufrichtig bei den Mozilla-Mitwirkenden entschuldigen, die teilweise aufgrund dieser Antwort die Entfernung der Unterstützung für -moz-document blockieren mussten.

Fix

In WebKit und Firefox 53 können Sie den Standardwert von „min-content“ einfach überschreiben, indem Sie „min-width: 0“ im Feldsatz festlegen. ¹

Firefox ist allerdings etwas seltsam, wenn es um Feldsätze geht. Damit dies in früheren Versionen ordnungsgemäß funktioniert, müssen Sie das Anzeigeattribut des Feldsatzes in einen der folgenden Werte ändern:

• table-cell (empfohlen)
• Tabellenspalte
• Tabellenspaltengruppe
• Tabellenfußgruppe
• Tabellenkopfgruppe
• Tabellenzeile
• table-row-group

Unter diesen empfehle ich table-cell. Sowohl „table-row“ als auch „table-row-group“ verhindern, dass Sie die Breite ändern, während „table-column“ und „table-column-group“ verhindern, dass Sie die Höhe ändern.

Dies führt (zu Recht) zu einer Unterbrechung des Renderings im IE. Da dies nur Gecko tun muss, können Sie diesen Effekt legitim vor anderen Browsern verbergen, indem Sie eine der proprietären CSS-Erweiterungen von Mozilla, @-moz-document, verwenden:

@-moz -document url-prefix() {</p>
<pre class="brush:php;toolbar:false">fieldset {
    display: table-cell;
}

}

(Dies ist eine jsFiddle-Demo.)

Denn

Das löst das Problem, aber wenn Sie wie ich sind, ist Ihre Reaktion wahrscheinlich...

Was?

Es hat zwar einen Grund, aber er ist nicht leicht zu verstehen. Die Standarddarstellung des

fieldset-Elements ist lächerlich und im Grunde unmöglich in CSS anzugeben. Denken Sie darüber nach: Der Rand des Feldsatzes verschwindet dort, wo er das Legendenelement überlappt, aber der Hintergrund ist immer noch sichtbar! Keine andere Kombination von Elementen kann diesen Effekt reproduzieren.

Am wichtigsten ist, dass bei der Implementierung zahlreiche Zugeständnisse an das Altverhalten gemacht werden. Eine davon ist, dass die Mindestbreite eines Feldsatzes niemals kleiner ist als die eigentliche Breite seines Inhalts. WebKit bietet eine Möglichkeit, dieses Verhalten zu überschreiben, indem es im Standard-Stylesheet angegeben wird. Gecko² geht jedoch noch einen Schritt weiter und erzwingt dieses Verhalten in der Rendering-Engine.

Interne Tischelemente stellen jedoch einen besonderen Rahmentyp bei Gecko dar. Die Berechnung der Größenbeschränkungen für Elemente mit diesen Anzeigewerteinstellungen erfolgt in einem separaten Codepfad, wobei die für das Feldset erzwungene Mindestbreite vollständig umgangen wird.

Noch einmal: Firefox 53 verfügt über eine Fehlerbehebung für dieses Problem. Sie benötigen diese Fehlerbehebung also nicht, wenn Sie nur auf neuere Versionen abzielen.

Ist die Verwendung von @-moz-document sicher?

Für dieses Problem ist es sicher. @-moz-document funktioniert wie erwartet in allen Versionen von Firefox (bis 53, wo dieser Fehler behoben wurde).

Das ist kein Zufall. Teilweise aufgrund dieser Antwort wurde der Fehler, der @-moz-document auf Benutzer-/UA-Stylesheets beschränkt, so eingestellt, dass zunächst der zugrunde liegende Fieldset-Fehler behoben wird.

Darüber hinaus verwenden Sie @-moz-document nicht in CSS, um auf Firefox abzuzielen , auch wenn andere Ressourcen dies tun. ³

Das obige ist der detaillierte Inhalt vonWarum schrumpft meine nicht wie erwartet? Es scheint ein nicht entfernbares Problem mit der Mindestbreite und dem Mindestinhalt zu geben.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!