javascript - internet - Radio de borde para IE8
jquery support (16)
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.
Entonces, si alguien puede ayudarme con un pequeño jQuery o complemento de JavaScript para hacer solo border-radius en IE 8, estaré agradecido por la vida.
¿Por qué no usas 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 uniformes en ancho.
Simplemente crea algunas clases como curved-std-width , curved-lge-width , curved-sml-width y luego puedes 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 agregar html interminables antes y después de las entradas de formularios.
De lo contrario, probablemente también puedas hacerlo usando jQuery:
$('':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 luego modele apropiadamente.
¿Por qué no usas el jquery.malsup.com/corner de jQuery?
Puede aplicar fácilmente esquinas a cualquier elemento con un nombre de clase o ID específico; por ejemplo:
$("#box1").corner();
También le permite decorar o modificar el tipo de efecto de esquina que desea adornar sus elementos.
También puede usar otras soluciones de JavaScript como CurvyCorners o incluso algunas http://www.cssjuice.com/25-rounded-corners- . Otra opción es usar JavaScript para envolver los elementos <div> entradas de su 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 este tutorial .
De acuerdo con Microsoft :
Otras soluciones de esquinas redondeadas
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 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-Discuss Wiki, RoundedCorners: http://css-discuss.incutio.com/?page=RoundedCorners
SmileyCat, CSS Rounded Corners "Roundup": http://www.smileycat.com/miaow/archives/000044.php
CSS Juice, 25 técnicas de esquinas redondeadas con CSS: http://www.cssjuice.com/25-rounded-corners- techniques-with-css /
Echa un vistazo a esta publicación: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
Cubre específicamente las esquinas redondeadas y la sombra de la caja en IE7 / 8.
y también a continuación con tantos ejemplos
Esto es feo pero podría funcionar si conoce de antemano el color de fondo de los campos de entrada (que puede ser un problema con los botones de envío): http://jsfiddle.net/563c5/1/
No tengo idea de cómo se comportará cuando renderice muchos campos de entrada 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.
Has probado esto: jquery.malsup.com/corner
He usado 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.
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.
Otra solución basada en JavaScript: Nifty Corners Cube . Se lanza como GNU GPL y no necesita jQuery.
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: jquery.malsup.com/corner
Puede usar la imagen con una esquina redonda para bordear un div. Ejemplo:
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml
O haces algo de magia como:
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
Recomendaría darle una oportunidad a Modernizr , lo mejor de todo es que puedes usarlo para sustituir la mayoría (si no todos) de CSS3 no soportado en navegadores más antiguos. Lo he usado en una gran cantidad de aplicaciones web sin dramas.
También puede consultar la biblioteca jQuery UI que creo que tiene algunos scripts de esquinas redondeadas.
¡Espero que esto ayude, buena suerte!
Si no usa las bibliotecas que describió en su pregunta, no creo que pueda hacer curvas en IE8.
Si realmente los quería, probablemente podría usar una imagen para obtener el efecto de esquina curva, a costa de un mayor ancho de banda y un código desordenado.
Utilice este código para obtener una 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>
deberías usar el pie.htc alternativo, es algo similar pero menos problemático, y de cualquier forma no lo recomiendo.
El uso intensivo de elementos css3 en estos css3 no cumple con los navegadores, no funcionan bien, lo más probable es que su sistema no esté actualizado demasiado, lo que los hace extremadamente laggy. Entonces es bueno para ellos degradarse a un rincón normal.
Si realmente quieres que se vea bien, es decir, lo mejor es usar fondos de imágenes de sprites, o vas a cambiar para alejar a varios de tus visitantes por problemas de retraso.
Usa esto: http://css3pie.com/
PIE hace que Internet Explorer 6-9 sea capaz de representar varias de las funciones de decoración más útiles de CSS3.
Funciones de CSS3 compatibles
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image