border-image: solución para IE

Question

¿Hay alguna solución para IE que me permita usar border-image? Estoy desarrollando un sitio y funciona correctamente en todos los navegadores, excepto en IE. Necesito a imitar estas barras

que podría utilizar el hack ie-css3.htc pero border-radius sólo funciona con las cuatro esquinas juntos (que no se aplica aquí, porque el borde superior no es redondeado) y la propiedad filter css (para degradado) no funciona con border-radius en absoluto (llena el elemento completo ignorando los límites del radio del borde). En caso de que no haya una solución para esto, ¿cuál sería la mejor manera de hacerlo?

Answer 1

Los archivos .png son innecesarios. Sólo tiene que utilizar pastel de CSS3: http://css3pie.com/

Deshacerse de la propia IE filtrar por completo, y el uso (je, la propietaria) -pie-background:linear-gradient(values) lugar.

Obras en armonía con las esquinas redondeadas de forma individual: border-radius: 0 5px 5px 5px

En ese caso, la esquina superior izquierda habría ninguna frontera de radio, y las otras esquinas (a la derecha) estarían en cada 5px.

Luego use behavior:url(path_to/pie.htc); en el mismo estilo.

Recuerde también que path_to es relativo al documento que se está visualizando, no el archivo CSS que lo llama. Asegúrate de verificar si no funciona desde el principio.

He probado esto muchas veces y funciona como un encanto.

Información adicional:

Si a veces parece que su estilo y se desvanece, tratar de darle a su elemento de un position:relative y una z-index especificada. La forma en que CSS3 PIE funciona, juega con el índice Z y puede hacer que los degradados con estilo (y las esquinas redondeadas, etc.) aparezcan debajo del fondo si no se especifica, especialmente si usa márgenes negativos o algo así.

Answer 2

No, pero la cosa ie-css3.htc puede ser la única solución posible si esa es la que estoy pensando. ¿O había otro script js en el que estoy pensando que resolvió esto? No puedo recordar

Answer 3

La única solución real podría ser hacer sus imágenes de esquinas o lados. Parece que todo tiene el mismo tamaño y tiene un ancho expandible. por lo que debería ser extremadamente fácil codificar casi sin tiempo de retraso para la carga.

Es por esto que adhiero al concepto de usar lo que está comprobado como disponible. Es decir, si su mercado objetivo está utilizando IE7 +, debe ser consciente al diseñar y programar, para que no se encuentre con pequeños problemas como este.

Todo esto CSS3 y HTML5 son cosas increíbles, pero nosotros, como desarrolladores, todavía estamos limitados a lo que todos ven. Si quiere tener un campo de juego parejo para todos los usuarios, puede confiar en las nuevas prácticas de codificación hasta que pueda hacer cosas, como el radio de frontera, en todos los navegadores.

Por otro lado, es posible que no le importe lo que ven los usuarios de IE; por lo tanto, puede tener el estilo diferente como una mejora del navegador para las personas que usan otros navegadores.

Answer 4

Tome una imagen muy amplia de ese degradado rojo con los 4 recortes de esquina adecuados, guárdelo como una imagen (PNG transparente en las esquinas ya que no es compatible con IE6).

Para cada una de esas áreas de encabezado va a envolver, así:

<div class="outer"><div class="inner">ENQUETE</div></div> 

establece esta imagen como fondo de estos dos elementos, que se compensan uno de ellos para que pueda obtener las tapas imagen en ambos principios y punto. Ajuste el espaciado/desplazamiento hasta que quede despejado en ambos segmentos redondos.

.outer { 
    background: transparent url(redgradient.png) no-repeat 0px 0px; 
    margin: 0 10px 0 0; 
} 
.inner { 
    background: transparent url(redgradient.png) no-repeat 100% 0px; 
    position: relative; 
    left: 10px; 
} 

Answer 5

Pulse el mismo problema exactamente y dio IE < = 9 a través de comentarios condicionales de un retroceso. Sin embargo, esta solución ahora se rompe con el último IE4 prev4 que aún no admite border-image y tampoco admite los comentarios condicionales de IE. Volver al plano de dibujo ...

Trabajando en la solución que realmente deberíamos usar: prueba de características.

Uso de Modernizr que agrega nombres de clases CSS3 a etiquetas html y pruebas de border-image (hacer las cosas según los estándares web) o no border-image (dar a los usuarios de IE lo mejor que puedes hacer pero no la misma experiencia que compatible navegadores y mostrar un enlace IE visible solo a su página que les dice cómo obtener una mejor experiencia: soltar IE por ejemplo).