Wie behebt man IE Rendering von Rand-Radius in Kombination mit Box-Schatten?

9

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: Ссылка

    
ThomasM 24.04.2013, 09:12
quelle

5 Antworten

3

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 ...

    
Willem 02.05.2013, 12:10
quelle
3

Eine schnelle (halb dreckige) Lösung, die ich ausprobiert und bearbeitet habe, ist ein Div in einem Div. Lass es mich wissen, wenn das so ist.

HTML CODE:

%Vor%

CSS CODE:

%Vor%

Mein jsfiddle

    
Cam 29.04.2013 18:56
quelle
2

Versuchen Sie Folgendes, fügen Sie diese Rolle hinzu:

%Vor%     
Rob1n 02.05.2013 20:46
quelle
0

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.

%Vor%     
Reggie Pinkham 05.12.2017 01:20
quelle
-4

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/

    
Pramod Bhoi 24.04.2013 10:29
quelle

Tags und Links