wake-up-neo.com

IE 11 Randartradius-Verrücktheit (trat nicht auf IE 9 und IE 10)

Ich habe in IE 11 nach ähnlichen Fragen zum Grenzradius gesucht, aber nur eine auf der Microsoft IE -Entwicklerseite gefunden hat beschrieben, was ich seitdem auch gerade erlebt habe. " Upgrade "auf IE 11. Die Antwort auf den Beitrag in diesem Thread bestand darin, sicherzustellen, dass DOCTYPE HTML5 und nicht Quirks war.

Ich beende gerade ein Redesign auf einer Website und ja, es ist HTML5 und hat den korrekten DOCTYPE, aber ich habe immer noch ein seltsames Problem mit dem Grenzradius. Für fast jedes Element, für das ich einen Grenzradius angewendet habe, gibt es einen Versatz von 1 Pixel. Wenn ich den Grenzradius deaktiviere, verschwindet das Problem und alles ist in Ordnung, aber schockierend war dies kein Thema in IE 9 oder IE 10. Nur seit IE 11 vor einigen Tagen hat dieses Problem aufgetaucht. Ich habe unter Windows 7 mit IE 11 und Windows 8.1 mit IE 11 getestet, und das Problem besteht bei beiden.

Beispiel 1:

Ich habe hier einen border-radius: 5px 0 0 5px und wende separate Pseudo-Elemente an: before und: after, um das spitze Dreieck zu erhalten, aber der Grenzradius scheint eine 1px-weiße Linie zu erzeugen, sodass er nicht mehr bündig mit dem Rest des Elements ist. Dies funktionierte auch in IE 8 einwandfrei, ist aber jetzt in IE 11 defekt. Wenn ich den Grenzradius entferne, wird das Pseudoelement-Dreieck wieder bündig mit dem Element.

Beispiel 2

Eine <a>-Schaltfläche, die als Inline-Block angezeigt wird, hat einen linearen Verlauf für den Hintergrund, einen blauen einpinsigen 1px-Rahmen und border-radius: 4px. Der Randradius erzeugt jedoch eine weitere weiße Linie innerhalb der blauen 1px-Grenze. Unabhängig von einem anderen Grenzradiuswert bleibt die weiße Linie erhalten, sofern der Grenzradius nicht 0 ist.

Beispiel 3:

Drei <a>-Verbindungselemente werden auf display: inline-block innerhalb eines <div> festgelegt, der relativ zu einem anderen <div> darunter positioniert ist. Der untere <div> hat einen border-radius: 4px, und die <a>-Elemente im oberen <div> haben oben links und rechts einen Randradius (dargestellt). IE 11 zeigt eine Lücke von 1 Pixel zwischen den beiden <div>-Elementen (wie in den anderen oben verknüpften Postern gezeigt). Wenn jedoch der Grenzradius <div> auf 0 gesetzt ist, verschwindet die Lücke.

Wieder war keine dieser Instanzen ein Problem in IE 9 und IE 10; erst seit IE 11 diese "1px-Lücke" mit Elementen mit Randradius aufgetreten ist. Ich weiß nicht, wie ich es reparieren soll. Natürlich sind keine anderen Browser betroffen. Firefox, Safari, Opera und Chrome werden alle gut angezeigt.

Jede Hilfe wäre sehr dankbar.

28
jrob007

Soweit ich weiß, gibt es einen Fehler mit border-radius in IE11. Das von Ihnen beschriebene Problem kann Teil des Gesamtbildes sein. Mehr Info .

2
Matt Smith

Die Problemumgehung für gebrochene Pixel kann dazu führen, dass Firefox den Text um 1 Pixel verzerrt, da er pixelweise ausgerichtet ist, um Unschärfen in bestimmten Schriftgrößen zu vermeiden.

Der Überlauf: Hidden Wrapper Workaround in dieser Msdn-Thread (wo Sie gepostet haben) ist möglicherweise weniger anfällig für Kompatibilitätsprobleme wie diese.

0
user3023308