2012-05-14 22 views
5

He estado usando JQueryUI para varios aspectos de mi sitio, y un menú pequeño con pestañas funcionaba bien, excepto en firefox. La siguiente imagen muestra el mismo código representado en Firefox en la parte superior e IE9 a continuación. Tenga en cuenta la brecha debajo de las pestañas y el (¿posible?) Aumento en el relleno dentro de la pestaña. He eliminado todas mis hojas de estilo del sitio (la segunda imagen), dejando solo la interfaz de usuario de JQuery, pero las brechas aún aparecen, y solo en Firefox.Brechas debajo de las pestañas usando JQuery UI en Firefox

El JS llamada es tan básico como puede ser:

$("#menuTabs").tabs(); 

No es frecuente que tengo problemas de visualización, donde IE es mejor que Firefox ... Después de haber eliminado todo el CSS me genera, y se aseguró de que hay no se aplican estilos, ¡no sé dónde mirar!

Si puede ofrecer alguna sugerencia sobre lo que podría estar causando, ¡sería un chappie feliz!

IE and Firefox rendering the same menu IE and Firefox rendering with none of my stylesheets in place

[EDIT] Después de escalar hacia atrás el código por lo que pude, y utilizando sólo las bibliotecas 'buenas conocida', resulta que es causada por ella estar en una celda de la tabla!

Aquí hay un código con el que puedes jugar. http://jsfiddle.net/XVHTk/ Sin embargo, funciona cuando se marca "CSS normalizado", por lo que podría ser un relleno heredado de la celda, ¿no es así?

[editar # 2]

derecho.

So.

Resulta que los estilos CSS aplicados a una tabla para eliminar el relleno, los márgenes y los bordes, etc., no son suficientes. Debe incluir cellpadding = "0" y cellspacing = "0" en la definición de la tabla; de lo contrario, las pestañas de jQuery tienen algo de relleno adicional a su alrededor.

Impar.

jsFiddle con mesa y sin extras: http://jsfiddle.net/XVHTk/1/

jsFiddle con mesa de separación/acolchado despojado: http://jsfiddle.net/XVHTk/2/

Por qué las propiedades de células HTML están siendo transferidos a las pestañas, que no tienen ni idea. ¡Estoy feliz de haberlo arreglado!

+0

uso de Firebug y ver lo que está haciendo el vacío. Es un problema de relleno o de margen. – Romias

+0

No hubo estilos en su lugar, excepto aquellos en el archivo jQueryUI css (ver violines arriba). Sin embargo, parece que algo de herencia de las propiedades html de la tabla en la que se encontraba ha disminuido en los estilos. No tengo idea de cómo ni por qué, pero parece que está arreglado ahora. – CrazyChris

+0

¡Gracias por las ediciones, explicación y solución! Tuve el mismo problema frustrante. – Redtopia

Respuesta

Cuestiones relacionadas