Warum bewegt das After-Pseudo-Element ein zusätzliches Pixel, wenn es absolut in Firefox positioniert ist? - HTML, CSS, Pseudoelement

http://jsfiddle.net/NgdUR/

Ich verwende grundsätzlich CSS-Dreiecke mit Rändern, um ein benutzerdefiniertes Auswahlfeld mit Auf- und Abwärtspfeilen zu erstellen.

Wenn Sie dies auf Opera, Chrome und Safari überprüfen, funktioniert es gut, aber in Firefox gibt es ein zusätzliches Pixel auf dem After-Pseudo-Element (oder ein Pixel mit weniger als dem vorherigen).

Wenn ich die Pseudoelemente dahingehend ändere, dass sie eine Hintergrundfarbe enthalten, haben sie keine Ausrichtungsprobleme: http://jsfiddle.net/NgdUR/1/

irgendwelche Ideen?

Bearbeiten: Bild in Firefox,

Wie sehe ich in anderen Browsern aus:

Vielen Dank

/ Jai

Antworten:

1 für die Antwort № 1

Ich habe eine Höhe und Breite von 1px hinzugefügt und die Randbreite jedes Pseudoelements in 2px geändert. Hat den Trick in Firefox, IE9 und Chrome. IE8 und Opera 11+ wirken etwas klobig.

Aktualisierte Geige

.test {
position:relative;
background:#ccc;
border:1px solid #aaa;
box-shadow:#aaa 0 0 4px;
display:block;
height:26px;
width:28px;
}
.test:before,
.test:after {
content:"";
border:2px solid transparent;
width:1px;
height:1px;
display:block;
position:absolute;
left:11px;
}
.test:before {
border-bottom:3px solid #000;
top:6px;
}
.test:after {
border-top:3px solid #000;
top:14px;
}​

---

0 für die Antwort № 2

dies behebt es für mich auf FF11:

.test {
position:relative;
background:#ccc;
border:1px solid #aaa;
box-shadow:#aaa 0 0 4px;
display:block;
height:26px;
width:28px;
}
.test:before {
content:"";
border:3px solid transparent;
border-bottom:3px solid #000;
width:0;
height:0;
display:inline-block;
position:absolute;
top:6px;
left:11px;
}
.test:after {
content:"";
border:3px solid transparent;
border-top:3px solid #000;
width:0;
height:0;
display:inline-block;
position:absolute;
top:14px;
left:10px;
}

---

0 für die Antwort № 3

Gut... Ein paar Jahre später und immer noch das gleiche Problem: Wenn Sie Firefox (im Moment von Version 45) etwas mit: before oder: after und einem Spiel mit dicken Dreiecken erzählen, berechnet er die Breite und Höhe dieser Elemente immer noch zufällig bis zu einem Pixel. Dies führt zu hässlichen visuellen Belästigungen, insbesondere im Zusammenhang mit fließend reagierenden Layouts, wenn sich Pfeilspitzen und -schwänze bei der Hälfte aller Fälle von ihrem Körper trennen.

Da ich diese in einem meiner Projekte reparieren musste, bin ich über diesen Artikel gestolpert. Aber es hat nicht wirklich aus der Box geholfen. Vielmehr wollte ich ganz andere Wege gehen.

Was in meinem Fall zuverlässig geholfen hat, war:

1. Stellen Sie die Größenanpassung des Dreiecks auf den Rahmen ein
2. Geben Sie den inneren Inhalt des Dreiecks (Breite / Höhe) der Größe 0 an
3. Geben Sie der äußeren Rahmenbox die gewünschte Größe des Dreiecks an

Relativ einfach, aber für Firefox der einzige Wegihn dazu zu bringen, sich den Regeln zu unterwerfen. Chrome hatte keine Probleme mit der Methode der Größenanpassung. Obwohl Opera ein Klon von Chrome war, zeigte Opera überraschenderweise dieselbe Clownerie wie Firefox, aber auch das gleiche Taming.

---