Wie erreicht man eine konsistente Ausrichtung von Kontrollkästchen und Beschriftungen in allen Browsern?

So richten Sie Kontrollkästchen und ihre Beschriftungen konsistent in allen Browsern aus

Diese Frage verdeutlicht die Herausforderungen, denen man bei der einheitlichen Ausrichtung von Kontrollkästchen und ihren Beschriftungen in verschiedenen Browsern, insbesondere Safari und Firefox, gegenübersteht , und IE. Der bereitgestellte Code stellt das Standard-HTML und CSS für ein Formular dar, das ein Kontrollkästchen und seine Beschriftung enthält.

Eine früher beliebte Lösung bestand darin, Vertical-Align: Baseline in der Eingabe zu verwenden, um das Kontrollkästchen in Safari korrekt auszurichten. Dieser Ansatz führte jedoch häufig zu Fehlausrichtungen in Firefox und IE.

Nach umfangreichen Tests und Optimierungen entstand eine andere Lösung, die die folgenden CSS-Eigenschaften umfasst:

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;
}

Diese Lösung richtet die aus Das Kontrollkästchen und seine Beschriftung werden in separaten Zeilen angezeigt und sorgen unabhängig vom Browser für eine vertikale Ausrichtung. Außerdem wird der Etikettentext nach dem Umbrechen korrekt eingerückt. Mit diesem Ansatz können Kontrollkästchen und ihre Beschriftungen browserübergreifend konsistent ausgerichtet werden.

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