JQuery esquinas redondeadas en Internet Explorer (IE) en mal estado

estoy usando jquery.corner.js de jQuery para crear esquinas redondeadas en algunas etiquetas td, y se ven bien en IE SALVOJQuery esquinas redondeadas en Internet Explorer (IE) en mal estado

si abre una nueva pestaña y luego volver a la página
si va a otra pestaña, haga clic en un enlace, luego vuelva a la página
si pasa el puntero sobre un menú/div que ejecuta javascript (creo).

Las esquinas redondeadas se reemplazan con líneas horizontales, y el texto dentro de la etiqueta td se empuja hacia abajo. Una vez que la página se actualiza, sin embargo, la prestación vuelve a la normalidad. En todos los casos, funciona perfectamente en Firefox.

¿Alguna idea?

Como referencia, el código Javascript que estoy usando es el siguiente (se trata de una página de MOSS 2007):

$(document).ready(function(){ 
    $("table.ms-navheader td").corner("top"); 
});

Aquí está una página HTML de ejemplo que muestra perfectamente el problema:

<html> 
    <head> 
     <script type="text/javascript" src="jquery-1.2.6.js"></script> 
     <script type="text/javascript" src="jquery.corner.js"></script> 
     <script type="text/javascript"> 
      <!-- 

      $(document).ready(function() 
      { 
       $("div").corner("top"); 
       $("td").corner(); 
      }); 

      //--> 
     </script> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td style="background-color: blue"> 
        TD that will be messed up. 
       </td> 
      </tr> 
     </table> 
     <div style="background-color: green"> 
      divs don't get messed up. 
     </div> 
    </body> 
</html>

En el código anterior, el TD se perderá una vez que abra una nueva pestaña, pero no la div. No tengo mucho control sobre el HTML emitido por MOSS, de lo contrario podría haber mordido la viñeta y usado DIV aquí en lugar de una tabla.

Fuente

2008-10-20 Ryan Shripat

Hay varios plugins jquery.corner.js. Un enlace al que está usando sería útil. :) –

que he tenido más que problemas con las esquinas redondeadas librerías Javascript (especialmente con IE6 y 7)

Al final me he vuelto a enfoques más tradicionales que implican imágenes. Un poco más de una tarea para configurar, pero funciona perfectamente.

Fuente

2008-10-20 18:15:29 RichH

Es un poco difícil visualizar el problema que está teniendo, un enlace sería realmente útil. Asegúrese de que sus propiedades de alto y ancho estén definidas para cada celda de su tabla. Podría ser un problema de hasLayout.

Fuente

2008-10-20 18:17:07

Estoy de acuerdo con RichH, creo que todas las bibliotecas populares de JavaScript dejan algo que desear al intentar crear esquinas redondeadas.

Siempre me encuentro usando cornershop: http://wigflip.com/cornershop/, es un generador de imágenes/css que elimina el dolor de hacer bordes redondeados manualmente.

Fuente

2008-10-20 18:23:18 mmattax

Personalmente, me alegro de que no agreguen un montón de imágenes adicionales, etiquetas, CSS o lo que sea necesario para crear las esquinas redondeadas para el navegador que no son compatibles con las propiedades de CSS. Prefiero simplemente no tener esquinas redondeadas (en la mayoría de los casos) cuando no es compatible. –

Es posible que desee probar este complemento en lugar de jquery.curvycorners.js.

Lo usamos en nuestro proyecto sin ningún problema en absoluto, es posible que necesite anexar/anteponer tramos pero es muy sencillo.

Lo mejor -> anti-aliased por defecto.

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

Fuente

2008-10-21 10:05:12 penderi

Esto es genial. También tuve problemas con el otro complemento. –

¡Funciona increíble pero se bloquea en IE8! –

He buscado y no he encontrado una solución para las esquinas redondeadas en pestañas jQuery UI. El jquery themeroller admite esquinas redondeadas, pero la documentación dice que no funcionan en IE.

Aquí es una buena página con 25 métodos diferentes esquinas redondeadas http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Fuente

2009-02-12 23:48:14

que he tenido problemas similares, incluso en Firefox, he encontrado que si se aplica 'esquinas' a un elemento que tiene una clase que establece un color de fondo, las esquinas nunca se aplican. En mi caso, agrego una clase llamada 'seleccionada' que da un color de fondo diferente a la 'pestaña' seleccionada en un UL. Para evitar que esto aplico el color de fondo usando js en lugar de CSS después de haber añadido las esquinas:

$('.selected').css('background-color', '#3296C0');

También se añade un: hover que cambia el color de fondo de las esquinas se elevan al cuadrado de marcha atrás en vuelo estacionario. La solución que tengo hasta ahora es usar un evento onhover que vuelva a aplicar las esquinas (también podría establecer el color aquí).

$('#top-nav li a').hover(function(){ 
     $(this).corners('top'); 
    });

En cuanto a IE6 - una pesadilla - no sería tan malo si podía detectar IE6 y no añadir esquinas dejándolos al cuadrado. Ni siquiera intenté IE 7 aún ...

Fuente

2009-06-04 12:58:03 Kris

En IE obtuve mejores resultados con la biblioteca DD_Roundies. Solo funciona en IE sin embargo. Para Firefox necesitas agregar estilos de -moz-border-radius.

Fuente

2009-09-18 10:28:26

no necesita agregar nada a Firefox/Webkit, la secuencia de comandos es por sí misma, funciona en varios navegadores – vsync

Si lo hace en CSS, funciona incluso si JavaScript está deshabilitado. –

Este funciona mejor con diferencia. Todos los demás tenían una pequeña liendre que simplemente no estaba del todo bien. – knowncitizen

curvycorners.js y jquery.curvycorners.js sólo funcionan si no desea utilizar ninguna transición.

si tiene un acordeón o fade in/out efecto pestaña, el elemento con las esquinas redondeadas no representar correctamente después del cambio.

Fuente

2010-05-24 13:24:05 Gafroninja

para hacer jquery esquinas curvas funcionan en IE simplemente dar al elemento un color de fondo. No estoy seguro de por qué es así ... ¡simplemente funciona como magia!

Fuente

2011-05-15 22:04:17 Ozioma

JQuery esquinas redondeadas en Internet Explorer (IE) en mal estado

Respuesta

Cuestiones relacionadas