Wie implementiert man eine feste Breite für Spannen in ungeordneten Listen in verschiedenen Browsern?

Implementieren einer festen Breite in einem Bereich innerhalb einer ungeordneten Liste

Im Bereich des Webdesigns wird das Erreichen einer festen Breite für einen Bereich innerhalb einer Eine ungeordnete Liste kann eine Herausforderung sein. Betrachten Sie den HTML-Ausschnitt unten:

<code class="html"><ul>
  <li><span></span> The lazy dog.</li>
  <li><span>AND</span> The lazy cat.</li>
  <li><span>OR</span> The active goldfish.</li>
</ul></code>

Das gewünschte Ergebnis besteht darin, dass der Text, der auf jeden Bereich folgt, vertikal ausgerichtet ist, etwa so:

<code class="text">The lazy dog.
AND The lazy cat.
OR  The active goldfish.</code>

Um dies zu erreichen, ist ein gängiger Ansatz um das folgende CSS anzuwenden:

<code class="css">span {
  display: inline-block;
  width: 50px;
}</code>

Diese Lösung unterliegt jedoch Einschränkungen in bestimmten Browsern, nämlich Firefox 2 und früher. Diese Browser erkennen den Inline-Block-Wert nicht. Eine alternative Option für diese Browser ist die Verwendung von -moz-inline-box. Es ist jedoch wichtig zu beachten, dass dies kein exaktes Äquivalent zum Inline-Block ist und in bestimmten Szenarien ein unterschiedliches Verhalten zeigen kann.

Um die Konsistenz über alle Browser hinweg sicherzustellen, sind möglicherweise zusätzliche CSS-Optimierungen erforderlich. Eine solche Lösung ist:

<code class="css">@-moz-document url-prefix() {
  span {
    -moz-inline-box: true;
    width: 50px;
  }
}</code>

Durch die Verwendung dieses Ansatzes kann die gewünschte feste Breite in Browsern erreicht werden, die Inline-Block nicht nativ unterstützen. Es ist wichtig zu beachten, dass das Hinzufügen von Auffüllungen zum Text oder das Ändern der Struktur der Tags in diesem Szenario nicht zulässig ist.

Das obige ist der detaillierte Inhalt vonWie implementiert man eine feste Breite für Spannen in ungeordneten Listen in verschiedenen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!