Radio de borde para IE8

Question

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.

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.

Answer 1

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.

Answer 2

He usado el border-radius.htc en el pasado.

El único problema es que las URL de CSS son relativas al archivo CSS. HTC son relativos a la página.

you can download the demo here.

Answer 3

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.

• CSS-Discuta Wiki, RoundedCorners: http://css-discuss.incutio.com/?page=RoundedCorners

• SmileyCat, CSS esquinas redondeadas "Roundup": http://www.smileycat.com/miaow/archives/000044.php

• CSS jugo, 25 esquinas redondeadas técnicas con CSS: http://www.cssjuice.com/25-rounded-corners- técnicas -with-css/

Answer 4

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

Answer 5

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

Answer 6

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!

Answer 7

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

Answer 8

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.

Answer 9

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.

Answer 10

Has probado esto: http://jquery.malsup.com/corner/

Answer 11

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/

Answer 12

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 

Answer 13

puede utilizar una imagen con esquinas redondeadas para bordear un div. Ejemplo:

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

O bien, hacer algo de magia como:

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Answer 14

Control hacia fuera este mensaje: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

Se cubre esquinas específicamente redondeadas y caja de sombra en IE7/8.

y también por debajo con tantos ejemplos

http://blue-anvil.com/jquerycurvycorners/test.html

Answer 15

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

Answer 16

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>