css - sombreado - IE11 radio de borde y error de borde

estilos de bordes html

Question

Tengo un error visual extraño en IE11 como se puede ver en la imagen aquí>

http://www.jonwallacedesign.biz/ie11.png

Vea el extraño efecto en las esquinas del botón blanco "POR QUÉ USARNOS" ...

La combinación de border-radius de border-radius , background-image y border: 1px solid #colour parece estar creando este extraño efecto horrible.

Alguien sabe de una solución para arreglar?

CSS de la LI es:

background-image: url("../images/core/primnavItemBG_sprite.png");
background-position: 0 0;
border: 1px solid #FFFFFF;
border-radius: 6px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
color: #2062AF;
font-family: ''Montserrat'',Helvetica,Arial,sans-serif;
font-size: 14px;
margin-right: 5px;
outline: medium none;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;

Answer 1

Activa el modo IE10 agregando <meta http-equiv="X-UA-Compatible" content="IE=10" /> a la sección principal y funcionará normalmente.

Answer 2

Agregar un color BG sólido a IE10 + solucionó esto ... parece un error de IE que intenta generar bits CSS3 ...

Answer 3

En lugar de una imagen de fondo, ¿por qué no usar http://css3buttongenerator.com/ para recrear este botón y ahorrar en cualquier solicitud adicional y tiempo de carga? Pude volver a crear su botón y su gradiente bien en IE 11 usando el generador de arriba. Imagen adjunta; Imagen del botón

Answer 4

Este es un error conocido que se puede resolver al poner IE11 en el modo de compatibilidad IE10 en el que border-radius funciona bien.

Inserte <meta http-equiv="X-UA-Compatible" content="IE=10" /> en la head .

Answer 5

Esto funcionó para mí. No estoy seguro si tienes el mismo problema que yo. Me estaba poniendo un pequeño barrenador blanco en las esquinas.

clip de fondo: caja de relleno;

Answer 6

Por favor, intente esto dentro del bloque CSS condicional.

background-image: url("../images/core/primnavItemBG_sprite.png");
border: 1px solid #FFFFFF; /*In Border color use color same as background color otherwise use border-size:0*/
box-shadow: none;
outline: none;

Espero que esto solucione tu problema

Answer 7

Solución:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style>
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
</style>