Safari只显示3列而不是4列

Question

我需要显示4个图像在一排。 除了Safari，它可以在所有浏览器中工作，Safari在第一行显示3幅图像。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

null

.page .services .services-img {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.page .services .services-img .wpb_column {
  width: 25%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

null

null

<div class="vc_row wpb_row vc_inner vc_row-fluid services-img"><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="120" height="81" src="RGB-1.jpg" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="150" height="87" src="A1_01_08RED_TAG_3_L-1024x592-150x87.jpg" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="120" height="46" src="ntt_logopng.png" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="150" height="41" src="ald-automotive-logo-150x41.jpg" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="150" height="47" src="Union_CZ_LOGO_JPG-150x47.jpeg" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="120" height="80" src="Union-ZP-logo_120.jpg" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="150" height="84" src="aero-150x84.jpg" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="120" height="74" src="zbrojovka_120.png" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="120" height="22" src="Hydra-with-R_120.jpg" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="120" height="63" src="LINET_logo_120.jpg" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_single_image wpb_content_element vc_align_left">
		
		<figure class="wpb_wrapper vc_figure">
			<div class="vc_single_image-wrapper   vc_box_border_grey"><img width="150" height="79" src="economia-og-150x79.png" class="vc_single_image-img attachment-thumbnail" alt=""></div>
		</figure>
	</div>
</div></div></div></div>

null

是否有其他人经历过此问题，并知道解决方法？

Answer 1

不是最好的方式使用宽度与Flex-Box。

尝试将width:25%；替换为flex-base:25%；。

我希望这能帮到你。