2012-05-14 1 views
5

Ho utilizzato JQueryUI per vari aspetti del mio sito e un piccolo set di menu a schede funzionava bene, tranne in Firefox. L'immagine sotto mostra lo stesso codice visualizzato in firefox in alto, e IE9 in basso. Notare il divario sotto le schede e il (possibile?) Aumento del padding all'interno della scheda. Ho rimosso tutti i fogli di stile dal sito (la seconda immagine) lasciando solo l'interfaccia utente di JQuery di base, ma gli spazi ancora appaiono e solo in firefox.Spazi vuoti nelle schede che utilizzano l'interfaccia utente JQuery in Firefox

Il js chiamata è così semplice come si può essere:

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

Non capita spesso che ho problemi di visualizzazione in cui IE è meglio di Firefox ... Dopo aver rimosso tutti i CSS ho generato, e fatto in modo non c'è non vengono applicati stili, non riesco a vedere dove guardare dopo!

Se si può offrire qualche suggerimento su cosa potrebbe causarlo, sarei un felice chappie!

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

[EDIT] Dopo ridimensionamento del codice per quanto ho potuto, e utilizzando solo 'noto buoni' biblioteche, si scopre che essa è causata dal fatto che è in una cella di tabella!

Ecco un codice con cui puoi giocare! http://jsfiddle.net/XVHTk/ Funziona comunque quando è selezionato "Normalized CSS", quindi potrebbe essere il padding ereditato dalla cella?

[EDIT # 2]

destro.

Così.

Si scopre che gli stili CSS applicati a una tabella per rimuovere padding e margini e bordi e così via non sono sufficienti. Devi includere cellpadding = "0" e cellspacing = "0" nella definizione della tabella, altrimenti le schede jQuery hanno qualche padding extra intorno a loro.

Dispari.

jsFiddle con tavolo e nessun extra: http://jsfiddle.net/XVHTk/1/

jsFiddle con spaziatura tavolo/padding messo a nudo: http://jsfiddle.net/XVHTk/2/

Perché le proprietà della cella HTML vengono trasferiti nelle linguette, non ho idea. Sono solo felice di averlo risolto!

+0

Utilizzare Firebug e vedere che cosa sta facendo il divario. È un problema di riempimento o margine. – Romias

+0

Non erano presenti stili, tranne quelli nel file css jQueryUI (vedere i violini sopra). Tuttavia, sembra che l'ereditarietà delle proprietà html dalla tabella in cui si trovava all'interno sia scesa negli stili. Non ho idea di come o perché, ma sembra essere stato risolto ora. – CrazyChris

+0

Grazie per le modifiche, la spiegazione e la soluzione! Ho avuto lo stesso problema frustrante. – Redtopia

risposta

1

Ciò è causato da un bug nella classe ui-helper-clearfix. Vedi ticket #8442 e the associated fix. Come puoi vedere dal ticket, questo è stato corretto in 1.10.1. Ho creato un violino che mostra questo working properly with 1.10.1 e using 1.8.x with additional CSS to fix the issue. Quest'ultimo mostra che se non è possibile eseguire l'aggiornamento a 1.10.1+ al momento, è sufficiente includere il seguente CSS:

.ui-helper-clearfix:after { 
    border-collapse: collapse; 
}