jquery y bordes redondos

javi37 · #1 (**permalink**) 20/07/2009, 12:21

Hace 6 meses se toco este tema. Y como se aconseja abrir un nuevo tema, aquí está
Con jquery es sencillo lograr bordes redondos.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		
		<script src="jquery-1.3.1.js" type="text/javascript"></script>
		<script src="jquery.corners.js" type="text/javascript"></script>
		<script src="jquery.corners.min.js" type="text/javascript"></script>
		<script>$(document).ready( function(){ $('#cabecera').corners("10px"); });</script>

	</head>
	<body>
		<div id="cabecera" style="background-color:#808080;">Esto es un ejemplo: round</div>
	</body>
</html>

Esto logra eso, redondear los bordes, pero hay alguna que otra pega.

Primero, este código en safari 4.0+ no funciona ¿?

Segundo, excepto en firefox, el resto de navegadores (explorer, chrome, opera) triplican el alto de la capa. Firefox no... y esto solo pasa cuando se le pasa un parámetro a "corners("10px"), si va sin parámetro "corners()" no triplica el alto, lo aumenta, pero no tanto. ¿Cómo se puede evitar esto? porque la verdad hace muy feo y puede descuadrar mucho la web.....

Tercero, si la capa tiene un width en firefox no pasa nada, pero explorer no lo cumple y lo descuadra todo. Lo cual es otro gran incoveniente....

Gracias

javi37 · #2 (**permalink**) 20/07/2009, 15:38

No he dicho nada, era debido a la versión del (js), con la versión actualizada nada de lo anteriormente dicho, sin pegas