2012-02-24 16 views
36

Tengo un problema con el radio de borde en IE8, hasta ahora utilicé pie.js pero no recomiendo esta biblioteca js porque tiene errores. Si tiene un sitio pequeño con pocas páginas html, está más que bien usar esa biblioteca, pero si tiene una aplicación pesada en la que se usan muchos marcos diferentes, entonces es imposible usar eso. Mismo comportamiento para CurvyCorners u otras mega bibliotecas.Radio de borde para IE8

Así que si alguien puede ayudarme con un pequeño plugin de jQuery o javascript para hacer solo border-radius en IE 8 estaré agradecido por la vida.

+94

En el 99% de los casos la frontera de radio no es crucial para un diseño. Emplea la técnica de la degradación elegante y deja IE8 con las esquinas cuadradas. –

+0

Puede intentar esto: http://jquery.malsup.com/corner/. Pero estoy de acuerdo en que debes dejar IE8, si es posible. – bfavaretto

+0

unfortunatley Debo tener la misma interfaz en ie8, chrome y ff – mcmwhfy

Respuesta

18

Si no utiliza las bibliotecas que describió en su pregunta, no creo que pueda hacer esquinas curvas en IE8.

Si realmente los quería, probablemente podría usar una imagen para dar el efecto de esquina curva, a costa de un mayor ancho de banda y un código desordenado.

+0

intente hacer eso en un formulario en el que tenga más de 150 entradas, selecciones, área de texto y otros bordes para los que desee agregar un radio de borde. El resultado es: la página se abrirá en pocos minutos. Por eso necesito algo fácil como una función jQuery, js. – BurebistaRuler

+0

Eso es verdad. Desde mi experiencia, vas a estar atascado ya sea por tener esquinas angulosas o por usar una biblioteca que ya dijiste que era imposible. –

+0

Sí, sow cómo lo arreglamos en el maravilloso IE8? Me gusta pensar que en este mundo alguien resolvió esto. – BurebistaRuler

6

Según Microsoft:

Otras esquinas redondeadas Soluciones

Nos gustaría señalar la abundancia de soluciones alternativas disponibles en la web. Además de las soluciones de esquinas redondeadas individuales, también hay sitios con listas actualizadas de soluciones de esquinas redondeadas que son compatibles con múltiples versiones de Internet Explorer y otros navegadores.

A continuación se enumeran algunos de nuestros sitios favoritos para las soluciones agregadas de esquinas redondeadas. Se presentan sin ningún orden en particular, y la inclusión de cualquier enlace no implica el respaldo por parte de Microsoft del sitio.

3

¿Por qué no utiliza css ': before y: after pseudo classes para agregar esquinas curvas.

Su comentario sobre la respuesta de Tom Will sugirió que tiene muchas entradas de formulario ¿no?

Bueno, supongo que serán en su mayoría de ancho uniforme.

Basta con crear algunas clases como curved-std-width, curved-lge-width, curved-sml-width y entonces usted puede hacer esto en tu CSS:

.curved-std-width:before { 
    height: 5px; 
    background: url('curved-top-5px.png'); 
} 

.curved-std-width:after { 
    height: 5px; 
    background: url('curved-bottom-5px.png'); 
} 

Algo así debería funcionar bastante bien sin tener que ir y añadir html sin fin antes y después forma entradas

De lo contrario es probable que pueda hacerlo usando jQuery así:

$(':input').before('<div class="left-top-corner"></div><div class="right-top-corner"></div>').after('<div class="left-bottom-corner"></div><div class="right-bottom-corner"></div>'); 

Y entonces el estilo de manera apropiada.

+0

¿tiene un ejemplo de esto para ver cómo funciona? – BurebistaRuler

+1

@burebistaruler Creo que no puedes esperar que haga algunos gráficos para esquinas redondeadas y luego alojarlos en alguna parte, solo para ayudarte con esto – HerrSerker

3

¿Por qué no usa jQuery's corner plugin?

Puede aplicar fácilmente esquinas a cualquier elemento con un nombre de clase o ID específico; por ejemplo:

$("#box1").corner(); 

También permite decorar o modificar el tipo de efecto esquina que adornan sus elementos.

También puede utilizar otras soluciones de JavaScript como CurvyCorners o incluso alguna CSS solutions. Otra opción es usar JavaScript para envolver los elementos <div> con las entradas del formulario y usar la imagen de fondo de CSS para emular el aspecto de las esquinas redondeadas. Para obtener instrucciones sobre esta última solución, consulte this tutorial.

+0

Ya probé este complemento ... te obliga a tener un color de fondo. – BurebistaRuler

+0

Eso no es cierto, creo que puede usar .corner (cc: xxx) para definir el color de los elementos de esquina? (Donde xxx es el color que ha elegido). – Houdmont

1

Recomendaría dar una oportunidad a Modernizr, lo mejor es que puede usarlo para sustituir la mayoría (si no todos) de CSS3 no soportado en navegadores anteriores. Lo he usado en una gran cantidad de aplicaciones web sin dramas.

También puede consultar el jQuery UI library que creo que tiene algunos scripts de esquinas redondeadas.

Espero que esto ayude ... ¡buena suerte!

+1

Hmmm Lo intenté una vez con Modernizr pero sé que algo no funcionó. ¿Tiene un pequeño ejemplo con modernizr border-radius para probar IE8 y ver cómo funciona? – BurebistaRuler

+0

Después de mirar la recuperación de Modernizr que utilizo e investigo un poco como resultado de su comentario, requerirá que se usen imágenes en las esquinas, ya no es genial, por lo que esto me llevó a investigar un poco donde encontré [este enlace] (http://blue-anvil.com/jquerycurvycorners/test.html) que en mis pruebas en IE8, así como probado los modos de navegador IE6, IE7 e IE8 en IE9 donde funcionó bien. Espero que esto te ayude un poco más. – Ryan

2

Ésta es feo, pero podría funcionar si se sabe de antemano el color de fondo de los campos de entrada (que puede ser un problema con botones de envío): http://jsfiddle.net/563c5/1/

no tengo idea de cómo se comportará cuando la prestación de un montón de entrada campos en una computadora promedio.

IE8 admite imágenes CSS en línea, y solo necesita 1 imagen pequeña para las cuatro esquinas redondeadas. Cualquier solución que dependa de imágenes de esquina en realidad puede requerir solo unos pocos bytes adicionales de ancho de banda.

1

debe usar el pie.htc alternativo, es algo similar pero menos problemático, y de cualquier manera no lo recomiendo.

El uso intensivo de los elementos css3 en estos navegadores no css3 cumplen, no funcionan bien, lo más probable es que su sistema no esté actualizado también, causándoles una gran demora. Entonces es bueno para ellos degradarse a un rincón normal.

Si realmente quiere que se vea bien en es decir, lo mejor es usar fondos de imágenes de sprites, o va a cambiar para ahuyentar a un número de sus visitantes por problemas de retraso.

1

No estoy seguro si fue cubierto por colaboradores anteriores, pero usé principalmente la biblioteca dd_roundies, y solo para esquinas redondeadas funcionó bien. Sin embargo, mezclar esquinas con filtros IE era demasiado pedir.

40

Prueba esto:

requiere:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script> 

Javascript:

$('.box').corner(); 

HTML:

<div class="box">Hello</div> 

CSS:

box{ 
    width:150px; 
    height:28px; 
    padding:10px; 
} 

más ejemplos: http://jquery.malsup.com/corner/

+1

Esta biblioteca funciona muy bien. Gracias por resolver mi ronda esquinas pesadilla – onof

+9

Esta lib particular sin embargo, agrega toneladas de contenedores div alrededor de cada formulario de entrada en IE8 (Acabo de contar 22 por entrada ... wtf?). Esto debe tener un impacto negativo en el rendimiento de las páginas grandes con muchas entradas, tal como se describe en la pregunta. – Rocco

1

Utilice esta:http://css3pie.com/

PIE hace Internet Explorer 6-9 capaz de hacer varias de las características más útiles de decoración CSS3.

Apoyado funciones CSS3

border-radius 
box-shadow 
border-image 
multiple background images 
linear-gradient as background image 
+0

leer la descripción de la pregunta;) – BurebistaRuler

0

Sólo otra solución basada en JavaScript: Nifty Corners Cube. Se lanza como GNU GPL y no necesita jQuery.

0

Use este código para obtener esquina redondeada en IE 6+

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/JavaScript" src="http://malsup.github.com/jquery.corner.js</script> 
<script> 
    $('#logo-navsection').corner(function() { 
     $("this").css("border-top", "0px 0px opx 10px")     
    }); 
</script> 
+0

Agrega colores para los bordes que no quiero, ya que entra en conflicto con la imagen de fondo. ¡Gran idea! – Si8

Cuestiones relacionadas