Wie kann ich eine konsistente Ausrichtung von Kontrollkästchen und Beschriftungen in verschiedenen Browsern erreichen?

Konsistente Ausrichtung von Kontrollkästchen und Beschriftungen in allen Browsern

Die korrekte Ausrichtung von Kontrollkästchen und ihren Beschriftungen in verschiedenen Browsern kann eine entmutigende Aufgabe sein. Um eine browserübergreifende Konsistenz zu erreichen, ist es wichtig, die Nuancen der Rendering-Engine jedes Browsers zu verstehen.

Im bereitgestellten Standard-HTML:

<label><input type="checkbox" /> Label text</label>

Eric Meyers Reset-Stylesheet wird im Allgemeinen angewendet und minimiert browserspezifische Überschreibungen. Trotz seiner Allgegenwärtigkeit bleibt die Ausrichtung von Kontrollkästchen und Beschriftungen in allen Browsern jedoch eine Herausforderung.

Lösung zur browserübergreifenden Ausrichtung

Nach umfangreichen Experimenten ist eine Lösung entstanden, die den Anforderungen gerecht wird die folgenden Anforderungen:

• Kontrollkästchen und Beschriftungen sind separat Zeilen.
• Die vertikale Ausrichtung ist in allen Browsern konsistent.
• Beschriften Sie den Text umbrochen, ohne sich unter das Kontrollkästchen zu erstrecken.

Der verwendete CSS-Code lautet wie folgt:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

Indem Sie die Beschriftung so einstellen, dass sie als Block angezeigt wird, und entsprechende Abstände und Texteinzüge anwenden, wird eine konsistente Beschriftung erreicht. Das Eingabeelement wird dann mithilfe der vertikalen Ausrichtung und der relativen Positionierung innerhalb des Etiketts positioniert, wodurch die Ausrichtung in allen gängigen Browsern sichergestellt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich eine konsistente Ausrichtung von Kontrollkästchen und Beschriftungen in verschiedenen Browsern erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!