Correzione o soluzione alternativa per la finestra di dialogo jQuery in IE6 - principali problemi di layout quando la finestra di dialogo contiene un modulo

Question

Sto lavorando con una finestra di dialogo jQuery che contiene un modulo. In ie6, ci sono un paio di pollici inspiegabili di imbottitura sopra il modulo. Quando elimino il modulo dal markup, i problemi di layout più gravi scompaiono. L'ho provato senza tema (impostazione predefinita), Flora e il mio tema themeroller e sembrano avere tutti lo stesso problema.

Ho provato ad apportare varie modifiche alla finestra di dialogo CSS, ma nulla sembra avere alcun effetto e una buona quantità di CSS in linea viene scritta quando viene creata la finestra di dialogo che impedisce l'applicazione di altri stili.

Ho provato a impostare le proprietà CSS sul modulo stesso, ad esempio mobile, eliminando i margini e il riempimento, mostrando in linea, ecc. ma finché il modulo è lì, c'è spazio extra. Qualcuno è stato in grado di trovare una soluzione alternativa per questo? Preferirei non hackerarlo e avere controlli del modulo senza tag del modulo.

Grazie.

Answer 1

Ogni volta che devo creare un tema CSS per un sito, un forum, un widget, ecc. esistenti Comincio sempre togliendo tutti i fogli di stile e normalizzando tutti i miei margini e il riempimento a 0 per ogni elemento principale html DOM. Questo è particolarmente importante quando si tratta di CSS in linea.

Quello che dovresti provare è rimuovere qualsiasi CSS inline sull'elemento del modulo stesso. Quindi prova qualcosa del tipo:

form {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

L'overflow dell'addomesticamento in IE6 spesso risolve molti problemi di margine. Prova a impostare temporaneamente i bordi su tutti gli elementi html usando lo stile seguente per vedere se qualche elemento precedente trabocca nello spazio del modulo.

* {
    border: solid 1px #FF0000;
}

Se vedi i bordi che si impongono sul modulo, dovresti provare a frenare anche l'overflow di quell'elemento.

Answer 2

Prima di modificare il CSS, assicurati che la tua pagina abbia un doctype.

Se non ha un tipo di documento, il browser visualizzerà 'quirks' modalità e molte cose non sembreranno del tutto giuste.

Answer 3

Avevo avuto un problema simile in precedenza con pulsanti e margini inspiegabili. Ci sono alcuni elementi in IE6 che ereditano i margini dei loro elementi padre. Molto bizzarro ...

Prova questa correzione: http: / /blog.netscraps.com/internet-explorer-bugs/ie6-ie7-margin-inheritance-bug.html

Answer 4

Prova qualcosa del genere:

#yourDiv { padding:1.2em; margin-right:2.4em; }

dove #yourDiv è l'id del div che contiene i tag (ho riscontrato questo problema con gli input).