CSS - I margini sono una brutta cosa?

Question

Ho notato che alcuni browser hanno problemi con i margini, specialmente quando un elemento è flottato. Ad esempio, questo sito Web che sto facendo sembra perfetto in Firefox, ma IE7 rovina completamente i margini a quanto pare. L'ho testato anche su diversi browser Linux e alcuni degli errori simili.

Il sito è http://w3box.com/mat

Questo sembra bene in FF3.0 per quanto posso dire. Non l'ho ancora visto in FF2, o IE6. Perché succede? È perché ho DIV flottato con margini specificati?

Ci sono alcune cose che dovrei evitare o che avrei dovuto fare diversamente?

Modifica: Quindi sembra che i miei tag siano stati la fonte del fallimento. Avevo inserito le immagini in quello che non era definito nel CSS e che aveva galleggiamento su di esse, combinato con i margini. Questi hanno rovinato tutto e devo rifare questi.

Inoltre, alcune cose sono accadute quando ho usato XHTML Strict invece :) Grazie a tutti! Cercherò di risolvere il problema da solo :)

Answer 1

Marging non è male, ma IE has some troubles con i margini degli elementi float. Mentre ci sono molte ricette per il fixing, credo che nel tuo caso potresti usare il posizionamento assoluto invece di float + margini (non hai veramente bisogno del comportamento "float" quando l'immagine è avvolta dal testo)

Answer 2

Suggerirei di utilizzare una qualche forma di CSS Framework (Blueprint CSS, 960 Grid, ecc.) In quanto hanno un numero di margini, padding e altri resettaggi di elementi HTML comuni . Dovresti scoprire che lo sviluppo di browser incrociati è più semplice utilizzando un framework.

Answer 3

Diversi browser hanno diversi modi per gestire il modello di box. Il più delle volte i siti che vengono visualizzati bene in FF, Chrome o IE8 possono avere problemi in IE6 e 7. Per risolvere questo problema puoi provare a impostare tutti i margini e il riempimento predefiniti su 0 (e regolarli secondo necessità su specifici elementi):

* {margine: 0px; imbottitura: 0px; } // regola più semplice ...

Per vedere più sui CSS ripristinare si può guardare: http://meyerweb.com/eric/tools/css/reset/

e quindi applicare stili diversi per IE7 e 6 con i commenti condizionali.

Answer 4

Non sono d'accordo con usare una libreria se si vuole conoscere la parte CSS della curva sfortunatamente sta imparando come i diversi browser reagiscono ai CSS. Non vorrei nemmeno suggerire di utilizzare un foglio di stile di ripristino. Se lo farai, impari come funziona il CSS. Se usi una libreria o un set di fogli di stile che non capisci come lo risolveresti quando si rompe.

Answer 5

Come accennato in altre risposte, si tratta dell'interpretazione di IE della casella model.

Ogniqualvolta qualcosa è flottato, IE tende a raddoppiare i margini specificati. Questo può essere risolto con un foglio di stile aggiuntivo per IE usando conditional comments.

Consulta anche: http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 6

Non c'è niente di sbagliato con l'utilizzo di margini.

Le versioni precedenti di IE hanno un bug e questo da solo non è un motivo sufficiente per evitare l'uso di una delle funzionalità di base del layout del CSS. In particolare, questo bug si verifica in IE quando si fa galleggiare un oggetto e dare un margine nella stessa direzione, per es .:

.whatever { 
    float: right; 
    margin-right: 5px; 
} 

Si può trattare con questo una serie di modi, in base al layout. Un modo sarebbe aggiungere un altro div attorno alla tua scatola e usare il riempimento su quello per replicare lo stesso spazio di un margine.