Come risolvere il rendering IE di border-radius combinato con box-shadow?

Qualcuno ha un'idea su come "correggere" il rendering in IE 9 e 10 di una combinazione di box-shadow e border-radius?Come risolvere il rendering IE di border-radius combinato con box-shadow?

È particolarmente evidente quando si utilizzano le ombre interne. Il raggio dell'ombra è molto diverso in IE rispetto al webkit/gecko ...

In questa immagine è possibile vedere il problema. Sulla sinistra c'è un pulsante con un'insieme box-shadow, a destra senza box-shadow. (Non importa il diverso carattere rendering)

enter image description here

Ecco il codice utilizzato: http://dabblet.com/gist/5450815

fonte

2013-04-24 ThomasM

Grande domanda. Navigando tra le [specifiche W3] (http://www.w3.org/TR/css3-background/#the-border-radius), non sono sicuro di quale agente utente abbia ragione (o se questo comportamento è definito). Non sono riuscito a trovare alcun dettaglio specifico da WHATWG (che spesso entra in profondità nell'implementazione del browser). Sembra che il raggio interno dell'ombra della scatola prenda il raggio * esterno * del bordo, quindi qualcosa come [questo] (http://jsfiddle.net/JMVgd/3/) corrisponde effettivamente a quello corretto. Tuttavia, quando non ci sono margini, questa inferenza di una larghezza esterna porta ai risultati indesiderati che stai vedendo. Non sono riuscito a trovare una soluzione alternativa. –

Chrome, Firefox e Opera interpretano correttamente le larghezze del browser inset come relative allo spazio visualizzato all'interno dell'elemento. Mentre IE non si preoccupa mai di fare la distinzione tra spazio interno ed esterno e usa sempre la curvatura del confine esterno. Dai un'occhiata qui: http://dabblet.com/gist/5503928 L'ombra di riquadro interno di IE corrisponde perfettamente alla curvatura di un bordo esterno 10px. Gli altri non invertono semplicemente lo stile del bordo, lo ricalcolano in base ai limiti dell'elemento. L'implementazione di IE è sbagliata e sembra pigra se siamo onesti. –

Il problema si verifica solo quando la diffusione dell'ombra inserto innesca una più grande "ombra-raggio" di la dimensione del raggio di confine in IE. Imposta il raggio del bordo a 50px nel tuo esempio e sembra lo stesso in IE e Chrome.

Se hai bisogno di un'ombra di scatola più grande, puoi usare solo un bordo, almeno nei tuoi esempi che farebbero il trucco. Esempio: http://dabblet.com/gist/5501799

Un altro problema che si potrebbe vedere è che IE e Chrome rendono la sfocatura del box-shadow totalmente diverso, ma suppongo che voi non lo si utilizza nel tuo esempio per quel motivo ...

fonte

2013-05-02 12:10:01 Willem

non è l'ideale, ma la soluzione migliore credo. Il problema è che il bordo deve animare al passaggio del mouse, quindi il pulsante salterà leggermente:/ – ThomasM

Ho appena provato ad animare un bordo e il padding allo stesso tempo: sembra davvero nervoso: http://jsfiddle.net/w1ll3m/TkpQm/. Forse 'dimensionamento della casella: border-box;' può aiutarti in qualche modo fissando la larghezza totale del pulsante. – Willem

-4

Prova questo: // CSS

.box { 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    -khtml-border-radius: 15px; 

    -moz-box-shadow: inset 0 0 10px #000; 
    -webkit-box-shadow: inset 0 0 10px #000; 
    box-shadow: inset 0 0 10px #000; 

    width: 200px; 
    height: 100px; 
}

Per IE8 è necessario includere Il file CSS3 pie (pie.htc) funzionerà su IE8.

È possibile scaricare da qui: http://css3pie.com/

fonte

2013-04-24 10:29:06

il problema non è che non esegue il rendering. Semplicemente non rende correttamente. – ThomasM

Hai aggiunto sopra i CSS? Funzionerà aggiungere il seguente CSS .box { \t border: 5px solid # 000; \t raggio-limite: 15px; \t -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; \t -moz-box-shadow: inserto 0 0 10px # 000; \t -webkit-box-shadow: inserto 0 0 10px # 000; \t box-shadow: inserto 0 0 10px # 000; \t larghezza: 200px; \t altezza: 100px; } http://jsfiddle.net/WcLKr/ –

come ho detto, non è questo il problema. Notare lo 0 in più nella dichiarazione: inserto 0 0 0 10px # 000. Ora prova che in IE8 en IE9, dà un brutto rendering rispetto a webkit/gecko. – ThomasM

Una soluzione rapida (semi sporco), che ho provato e funziona, è un div all'interno di un div. Fammi sapere se lo fa.

codice HTML: CODICE

</head> 
<body> 
<div class="box"><div class="box-inside"></div></div> 
</body> 
</html>

CSS:

.box { 
border-radius: 15px; 
box-shadow: inset 0 0 0 10px #000; 
width: 200px; 
height: 100px; 
background: #000; 
} 
.box-inside { 
border-radius: 15px; 
box-shadow: inset 0 0 0 10px #fff; 
width: 175px; 
height: 75px; 
position: relative; 
top: 12%; 
left: 6%; 
background: #fff; 
}

mio jsfiddle

fonte

2013-04-29 18:56:06 Cam

alla ricerca di una soluzione più pratica ... grazie però! – ThomasM

Ho fatto qualche tentativo con il tuo codice, ma sembra essere un problema di IE, vorrei controllare il webkit per vedere se fornisce una soluzione. http://css-tricks.com/almanac/properties/b/border-radius/ – Cam

Prova questo, aggiungere questo ruolo:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='1');

fonte

2013-05-02 20:46:10 Rob1n

si può tranquillamente utilizzare inset ombre box per emulare le frontiere nei browser moderni, ma IE mis-rende il raggio. È possibile aggirare il problema lasciando che IE ricominci allo stile "iniziale" predefinito.

.Button { 
    color: #0ac; 
    background-color: #fff; 
    border-radius: 8px; 
    box-shadow: inset 0 0 0 2px #0ac; 
} 

/* IE media query hack */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    .Button { 
    box-shadow: 0 0 0 2px #0ac; 
    } 
}

fonte

2017-12-05 01:20:34

Come risolvere il rendering IE di border-radius combinato con box-shadow?

risposta

Problemi correlati