Warum hat meine Schaltfläche unten in Chrome und Safari eine Lücke von 1 Pixel?

Subpixel-Diskrepanz beim Rendern von Schaltflächen in verschiedenen Browsern

Die Diskrepanz beim Rendern einer Komponente, die aus einem Eingabefeld mit einer eingebetteten Schaltfläche besteht, ist darauf zurückzuführen Unterschiede bei der Subpixelberechnung zwischen Browsern.

Problemerklärung

Firefox stellt die Schaltfläche korrekt mit einer Höhe von 100 % und sichtbaren Rändern dar, während Chrome und Safari eine 1-Pixel-Höhe einführen Lücke unten. Dieses Problem tritt auf, weil Chrome Ränder auf ganze Zahlen rundet, was zu einer Fehlberechnung des unteren Randes der Schaltfläche führt.

Lösung

Um diese browserübergreifende Rendering-Disparität zu beheben, übertragen Sie die Randnutzung von der Schaltfläche zu einem transparenten Rand. Legen Sie den Rand der Schaltfläche auf 1 Pixel fest und wenden Sie die Eigenschaft „background-clip: padding-box“ an, um zu verhindern, dass sich die Transparenz auf den Hintergrund auswirkt. Ersetzen Sie außerdem die em-basierte Auffüllung durch feste Pixelwerte, um einen Zoom-bezogenen Fehler in Chrome zu beheben.

Final Code Snippet

<code class="css">.wrapper {
  position: relative;
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

input {
  border: 1px solid red;
  width: 100%;
  background-color: limegreen;
  line-height: 3em;
  padding: 10px;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  width: 7em;
  margin: 0px;
  background-clip: padding-box;
  box-shadow: inset 0px 0px 0px 2px black;
}</code>

Das obige ist der detaillierte Inhalt vonWarum hat meine Schaltfläche unten in Chrome und Safari eine Lücke von 1 Pixel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!