Dlaczego Chrome nie respektuje prawidłowo marginesu?

wyszukiwać za długa i nie mogę znaleźć odpowiedzi:/Dlaczego Chrome nie respektuje prawidłowo marginesu?

w Chrome (Internet Explorer, Konqueror, i wiele innych) margines na dole h1 jest dodawana do .blue. Jednak Firefox poprawnie przestrzega zasad CSS.

Jakieś sugestie?

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; 
}

Gecko na bazie: [To jedna jest poprawna, myślę]

enter image description here

Webkit oparte KHTML oparte i Trident shell:

enter image description here

CODEPEN

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

Źródło

2014-04-07 sospedra

To wydaje się działać dobrze w Chrome dla mnie ... – jwddixon

@jwddixon możesz dodać więcej informacji, proszę.Wszyscy ludzie, których poprosiłem o sprawdzenie warunków, powiedzieli mi, że to zepsuło się. – sospedra

ROZWIĄZYWANIA

Po długich poszukiwaniach Zgłosiłem problem chromu repo. I akceptują to jako bug. Tak więc, jeśli ktoś chce wiedzieć, finał tej historii może śledzić proces naprawy here. Dziękuję wszystkim, którzy próbują nam pomóc, ale pozwolę sobie dodać, że nie wierzyłem, że Stackoverflow może nie widzieć błędu o tej wielkości. Jestem trochę mniej stackoverflowita.

Źródło

2014-04-15 15:03:47 sospedra

Definiowanie czcionki, to jest problem, każda przeglądarka posiada inny ustawienia domyślnych czcionek, nagłówków (h1 ... h6). Faktyczna wysokość tekstu w h1 będzie inna i jest to przyczyną różnych marginesów na dole/górze.

Jak widać, przeglądarka Gecko oparte wykorzystuje rodzaju Garamond -styled czcionki, wszystkie inne zastosowanie domyślnieTimes New Roman, oczywiście, jeśli użytkownik został predefiniowany czcionek dla stron, czasami wszystko może wyglądać tak samo we wszystkich przeglądarek, przykład:

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

Źródło

2014-04-07 11:22:14 bodi0

Nie działa. I wygląda nieistotnie na mój problem:/ – sospedra

kwestia margines masz związana jest z reguły w min-height.blue div. Zastąp go dla reguły height, jeśli możliwe jest uzyskanie tego samego wyniku w Chrome i Firefox.

Mimo to nie mam pojęcia, dlaczego tak się dzieje podczas korzystania z min-height. Może to jakiś błąd Chrome.

Źródło

2014-04-07 14:30:47 marquex

Dzięki, ale nie mogę uniknąć min-height – sospedra

Dlaczego Chrome nie respektuje prawidłowo marginesu?

Odpowiedz

Powiązane problemy