Heim > Web-Frontend > CSS-Tutorial > Warum hat meine Schaltfläche unten in Chrome und Safari eine Lücke von 1 Pixel?

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

Patricia Arquette
Freigeben: 2024-11-03 10:29:03
Original
271 Leute haben es durchsucht

Why Does My Button Have a 1px Gap at the Bottom in Chrome and Safari?

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage