[CSS][HTML]-webkit, Chrome vs. Mozilla Opcje

[JaHolden]

Cześć!

Mam problem z różnym wyświetlaniem pomiędzy Chrome i Mozilla. W chrome wszystko wyświetla się tak jak tego oczekiwałem, ale w Mozilli pojawiają się rozbieżności.
Rzecz w tym, że w Chromie szerokość main_section jest zachowana, i elementy div poruszają się wewnątrz po najechaniu muszką, nie zmieniając szerokości main_section. Inaczej jest w Mozilli - tam szerokość main_section jest dostosowana do zawartości, i jeśli któryś z elementów się rozszerza, całe main_section rozszerza się również.

KOD HTML

[HTML] pobierz, plaintext 
<section id="main_section">
<article id="galeria">
	<div id="gal_11"></div>
	<div id="gal_12"></div>
	<div id="gal_13"></div>
	<div id="gal_14"></div>
	<div id="gal_15"></div>
</article>
</section>
[HTML] pobierz, plaintext 

KOD CSS:

[HTML] pobierz, plaintext 
#main_section {
	width: 570px;
}
 
#galeria {
	display: -webkit-box;
	display: -moz-box;
	box-orient: horizontal;
	height: 190px;
}
 
#gal_11{ 
	background: #fff; 
	padding: 10px; 
	margin: 5px; 
	width: 100px; 
	transition: width .5s; 
	-webkit-box-flex: 1;
}
#gal_12{ background: #fff; padding: 10px; margin: 5px; width: 100px; transition: width .5s; -webkit-box-flex: 1;}
#gal_13{ background: #fff; padding: 10px; margin: 5px; width: 100px; transition: width .5s; -webkit-box-flex: 1;}
#gal_14{ background: #fff; padding: 10px; margin: 5px; width: 100px; transition: width .5s; -webkit-box-flex: 1;}
#gal_15{ background: #fff; padding: 10px; margin: 5px; width: 100px; transition: width .5s; -webkit-box-flex: 1;}
 
#gal_11:hover{ width: 250px;}
#gal_12:hover{ width: 250px;}
#gal_13:hover{ width: 250px;}
#gal_14:hover{ width: 250px;}
#gal_15:hover{ width: 250px;}
[HTML] pobierz, plaintext 

Czy ma ktoś pomysł w jaki sposób zablokować main_section, żeby zachowywało się tak jak w Chrome?

Z góry dzięki

Ten post edytował JaHolden 13.03.2015, 12:25:29

[CuteOne]

[CSS] pobierz, plaintext 
#main_section {
    width: -moz-fit-content;
}
 
#galeria {
 (...)
 width: -moz-fit-content;
}  
[CSS] pobierz, plaintext 

Ten post edytował CuteOne 13.03.2015, 13:27:23

[JaHolden]

Dzięki, ale takie rozwiązanie nie działa... Do tego, znika element który jest ustawiony na prawo od tego section (oczywiście tylko w Mozilli) :/

[tzm]

najlepsze jest to ze u mnie dziala tak samo, zobacz moze u siebie box-sizing, sprawdz elementy nadrzedne albo wklej calosc na jsfiddle.

[CuteOne]

Jak nie działa, jak działa http://jsfiddle.net/qkz27L95/1/

[JaHolden]

Bardzo proszę:

https://jsfiddle.net/mz07vfk6/



@CuteOne, ale jak wklepać link który podesłałeś pod mozillą, to jednak się całość wciąż rozszerza