Perché Chrome non rispetta correttamente il margine?

la ricerca di un lungo e non riesco a trovare una risposta:/Perché Chrome non rispetta correttamente il margine?

In Chrome (Internet Explorer, Konqueror, e molti altri) il margine h1, in fondo, si aggiunge a .blue. Tuttavia, Firefox rispetta correttamente le regole CSS.

Qualche suggerimento?

HTML

<div class="red"><div class="blue"><h1>Hello World!</h1></div></div>

CSS

.red{ 
    background: red; 
    /* All this contain margins */ 
    float:left; 
    /* padding-top:1px; */ 
    /* display: inline-block */ 
    /* overflow: hidden */ 
} 

.blue{ 
    background: blue; 
    min-height: 60px; 
} 

h1{ 
    margin: 10px 0 20px; 
    background: green; 
}

basato su Gecko: [Questo è il corretto, credo]

enter image description here

basato su Webkit, guscio di Trident KHTML-based e:

enter image description here

CODEPEN

http://codepen.io/marquex/pen/fzsIk

fonte

2014-04-07 sospedra

Questo sembra funzionare bene in Chrome per me ... – jwddixon

@jwddixon potresti aggiungere ulteriori informazioni, per favore.Tutte le persone che ho chiesto di verificare le condizioni mi hanno detto che si rompe – sospedra

RISOLUZIONE

Dopo una lunga ricerca ho segnalato il problema di cromo pronti contro termine. E lo accettano come un errore . Quindi, se qualcuno vuole sapere il finale di questa storia può seguire il processo di correzione here. Grazie a tutti coloro che cercano di aiutarci, ma lasciatemi aggiungere che non credevo che Stackoverflow potesse essere in grado di non vedere un errore di questa grandezza. Sono un po 'meno stackoverflowita.

fonte

2014-04-15 15:03:47 sospedra

Definire i tipi di carattere, questo è il problema, tutti i browser hanno diversa impostazioni per i font predefiniti, intestazioni (h1 ... h6) rispettivamente. Pertanto, l'altezza effettiva del testo in h1 sarà diversa e questa è la causa dei diversi margini in basso/in alto.

Come si può vedere, il browser basato su Gecko utilizza una sorta di Garamond carattere -styled, tutti gli altri uso di defaultTimes New Roman, ovviamente se l'utente è stato predefinito dei font per le pagine, a volte tutto quello che può sembrare la stessa in tutti browser, esempio:

h1{ 
    margin: 10px 0 20px; 
    background: green; 
    font-family: "Your-favorite-font", Times, sans-serif; 
    font-size: 2em; 
}

fonte

2014-04-07 11:22:14 bodi0

Non funziona. E sembra irrilevante ai miei problemi:/ – sospedra

il problema margine si stanno avendo è in relazione con l'min-height regola nel .blue div. Sostituiscilo per una regola height se è possibile ottenere lo stesso risultato in Chrome e Firefox.

Non ho idea del perché ciò avvenga quando si utilizza min-height. Forse è una specie di bug di Chrome.

fonte

2014-04-07 14:30:47 marquex

Grazie, ma non posso evitare l'altezza minima – sospedra

Perché Chrome non rispetta correttamente il margine?

risposta

Problemi correlati