Wie behebt man IE Rendering von Rand-Radius in Kombination mit Box-Schatten?
Hat jemand eine Idee, wie man das Rendering in IE 9 und 10 einer Kombination von Box-Shadow und Border-Radius "repariert"?
Besonders auffällig bei Verwendung von Schatten. Der Radius des Schattens ist im IE sehr unterschiedlich im Vergleich zu Webkit / Gecko ...
In diesem Bild können Sie das Problem sehen. Auf der linken Seite ist eine Schaltfläche mit einem eingelassenen Box-Schatten, auf der rechten Seite ohne Box-Schatten. (Unterschiedliche Font-Rendering)
Hier ist der verwendete Code: Ссылка
5 Antworten
Das Problem tritt nur auf, wenn die Ausbreitung des Schattens einen größeren "Schattenradius" auslöst als die Größe des Grenzradius in IE. Setzen Sie den border-Radius in Ihrem Beispiel auf 50px und in IE und Chrome sieht es genauso aus.
Wenn Sie eine größere Box-Shadow-Spanne benötigen, können Sie stattdessen zumindest einen Rahmen verwenden, zumindest in Ihren Beispielen, die das tun würden. Beispiel: Ссылка
Ein weiteres Problem, das Sie sehen könnten, ist, dass IE und Chrome die Unschärfe des Box-Shadows völlig anders darstellen, aber ich nehme an, dass Sie es in Ihrem Beispiel aus diesem Grund nicht verwenden ...
Sie können inset Box-Schatten sicher verwenden, um Ränder in modernen Browsern zu emulieren, aber der IE rendert den Radius falsch. Sie können dies umgehen, indem Sie IE auf den Standard-Stil "Anfang" zurückfallen lassen.
Versuchen Sie Folgendes: // CSS
%Vor%Für IE8 müssen Sie die CSS3 pie (pie.htc) -Datei einfügen, dann funktioniert es auf IE8.
Sie können von hier herunterladen: http://css3pie.com/
Tags und Links internet-explorer css css3