Warum gibt es in Chrome eine Haarlücke/Grenze zwischen diesen Blockelementen, aber nicht Firefox?

Wenn ich einem Container eine Hintergrundfarbe hinzufüge und dann Blockelemente im Stapel staple, ist eine Haarlücke zwischen den Elementen in Chrome sichtbar. In Firefox gibt es keine solche Lücke.Warum gibt es in Chrome eine Haarlücke/Grenze zwischen diesen Blockelementen, aber nicht Firefox?

Warum? Und wie kann dies ohne zusätzliche Verpackungselemente vermieden werden?

Es ist einfacher, in dem sehen JS Bin: https://razor-x.jsbin.com/teqevoc/6/edit?html,css,output

.main { 
 
    background-color: black; 
 
} 
 

 
.item { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: white; 
 
}

<div class="main"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
</div>

Quelle

2016-11-17 Evan Sosenko

Ich bin auf Chrome und sehe keine Haarlücke – j08691

@ j08691 Ich habe ein Bild hinzugefügt. Ich verwende die Chrome-Version 54.0.2840.100 (64-Bit). –

#norepro auf Chrome 56.0.2922.0 (Official Build) Kanarienvogel (64-Bit) oder 54.0.2840.99 (Official Build) m (32-Bit) unter Windows 10.0.14393 (64-Bit). – canon

-1

Diese ziemlich häufig in webkit passiert. Unter der Annahme, es gibt keine anderen Elemente Dinge aus dem Weg schieben kann dies über das Hinzufügen

position:relative; 
top: -1px;

festgelegt werden, die auf Browsern wie Firefox in der Regel nicht erkennbar ist und fixiert sie bis auf Webkit/Chrom.

Quelle

2016-11-17 20:03:00 CdnXxRRODxX

Das ist inkorrekt – evilReiko

Es hat an meinen Projekten gearbeitet und es wurde auf einer Vielzahl von verschiedenen mobilen Geräten getestet und ansonsten haben Erweiterungen das Problem nicht verursacht. – CdnXxRRODxX

Position: relativ und oben: -1px sind klar, was sie bedeuten. 1px-Lücke ist oft keine große Sache, aber wenn Sie Pixel-perfekt arbeiten wollen, dann haben Sie etwas nicht richtig. Es gibt viele Dinge, die zusätzlichen Abstand beeinflussen können: Zeilenhöhe, vertikale Ausrichtung, Schriftgröße, Auffüllung, Rand, Min/Max-Höhe/Breite, Anzeige, Position usw. Sie nennen es. – evilReiko

Wenn wir davon ausgehen, dass Sie nur CSS und HTML verwendet haben, sollte das in allen Browsern einwandfrei funktionieren. Vielleicht ist es eine Chrome-Erweiterung, die Sie installiert haben, die Ihrem HTML einige Pixel oder Elemente hinzufügt. Versuchen Sie, alle Ihre Chrome-Erweiterungen (falls vorhanden) zu deaktivieren und zu aktualisieren.

Quelle

2016-11-17 20:16:50 evilReiko

Warum gibt es in Chrome eine Haarlücke/Grenze zwischen diesen Blockelementen, aber nicht Firefox?

Antwort

Verwandte Themen