我在my website上有一个flexbox网格，但在IE11和Firefox中无法正确显示。
.section-home {
float: left;
}
/*** Flex Grid ***/
.flex-grid {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.flex-grid .flex-item {
display: flex;
display: -webkit-flex;
margin-top: 2rem;
}<div class="section-home">
<!-- PRODUCTS -->
<div class="products-home flex-grid">
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('cuadrospersonalizados') }}">
<img class="img-responsive" src="{{ FotImg::asset('img/fotolienzos.jpg') }}?dts={DPL_TS}" alt="Cuadros personalizados" title="Cuadros personalizados">
<span class="description">
<p>Lienzo con tus fotos colocado sobre madera de pino</p>
</span>
<div class="caption">
<h2>Fotolienzos</h2>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('fotolienzosconreloj') }}">
<img class="img-responsive" alt="Fotolienzos con Reloj" title="Fotolienzos con Reloj" src="{{ FotImg::asset('img/fotolienzos-con-reloj.jpg') }}?dts={DPL_TS}">
<div class="label-new">
<span class="new">novedad</span>
</div>
<span class="description">
<p>Lienzo personalizado con reloj colocado sobre bastidor de madera</p>
</span>
<div class="caption">
<h2>Fotolienzos con Reloj</h2>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('posterspersonalizados') }}">
<img class="img-responsive" alt="Pósters personalizados" title="Pósters personalizados" src="{{ FotImg::asset('img/posters-personalizados.jpg') }}?dts={DPL_TS}">
<span class="description">
<p>Pósters especialmente pensados para habitaciones juveniles e infantiles</p>
</span>
<div class="caption">
<h2>Pósters personalizados</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- PRODUCTS -->
</div>
弹性网格在Chrome中正确显示，但在IE和Firefox中，这些项目保持在一行并且不会换行。这是为什么？
答案 0 :(得分：2)
您的问题是.flex-grid（.section-home）周围的容器设置为float: left;且未设置width。这意味着它将被设置为width: auto;，因为它是一个浮动元素，将意味着它的内容将决定它的宽度。在这种情况下，浏览器选择计算宽度的方式似乎有所不同：
.section-home限制为其父级的宽度.section-home增长所需的数量，以容纳.flex-grid的所有子女有两种方法可以解决这个问题，但最简单的方法是从float: left;中删除.section-home，因为它似乎不需要。
.section-home {
/*float: left; Remove this*/
}
/*** Flex Grid ***/
.flex-grid {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.flex-grid .flex-item {
display: flex;
display: -webkit-flex;
margin-top: 2rem;
}<div class="section-home">
<!-- PRODUCTS -->
<div class="products-home flex-grid">
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('cuadrospersonalizados') }}">
<img class="img-responsive" src="{{ FotImg::asset('img/fotolienzos.jpg') }}?dts={DPL_TS}" alt="Cuadros personalizados" title="Cuadros personalizados">
<span class="description">
<p>Lienzo con tus fotos colocado sobre madera de pino</p>
</span>
<div class="caption">
<h2>Fotolienzos</h2>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('fotolienzosconreloj') }}">
<img class="img-responsive" alt="Fotolienzos con Reloj" title="Fotolienzos con Reloj" src="{{ FotImg::asset('img/fotolienzos-con-reloj.jpg') }}?dts={DPL_TS}">
<div class="label-new">
<span class="new">novedad</span>
</div>
<span class="description">
<p>Lienzo personalizado con reloj colocado sobre bastidor de madera</p>
</span>
<div class="caption">
<h2>Fotolienzos con Reloj</h2>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('posterspersonalizados') }}">
<img class="img-responsive" alt="Pósters personalizados" title="Pósters personalizados" src="{{ FotImg::asset('img/posters-personalizados.jpg') }}?dts={DPL_TS}">
<span class="description">
<p>Pósters especialmente pensados para habitaciones juveniles e infantiles</p>
</span>
<div class="caption">
<h2>Pósters personalizados</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- PRODUCTS -->
</div>