为什么使用IE 11在全宽度屏幕上我的图像包装

Question

我在IE 11和Edge上的此代码有问题，右侧包装在第二行上的第三张图像，而窗口仍处于完整宽度！但这不应该在下面进行检查代码。

当我向下缩放屏幕时，图像或__articlediv是响应性的，但是在600个像素后似乎可以工作。我对此做了很多研究，但找不到任何铅。

任何人都可以帮忙吗？

如果要测试代码，则可以使用交叉浏览器测试创建免费帐户并使用实时测试。

*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  outline: none;
}
.__main {
  display: flex;
  flex-flow: row wrap;	
}
.__article {
  padding:5px;
  flex-basis: 33.33%;
}
@media only screen and (max-width: 600px) {
	.__article {
  padding:5px;
  flex-basis: 70%;
	margin: 0 auto;
}
}

<div class="__main">
<div class="__article">
	<div class="div__img">
		<img src="http://via.placeholder.com/300x400" width="100%" />
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="__article">
	<div class="div__img">
		<img src="http://via.placeholder.com/300x400" width="100%" />
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
	<div class="__article">
	<div class="div__img">
		<img src="http://via.placeholder.com/300x400" width="100%" />
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>

Answer 1

首先，摆脱所有这些前缀，当然不需要它们，特别是webkit。如果您尝试支持IE10，但对于IE11，可能需要MS前缀。

。

由于添加填充物，该元素正在包装。似乎 box-sizing:border-box和display:flex在IE 11 上没有相处。因此，请使用Flex-Basis：calc(33.33% - 10px);补偿两个5PX桨，并删除box-sizing:border-box，以便其他浏览器不会缩小宽度，并且应该可以正常工作

*,
*:after,
*:before {
  /*box-sizing: border-box;*/
  margin: 0;
  outline: none;
}
.__main {
  display: flex;
  flex-flow: row wrap;	
}
.__article {
  padding:5px;
  flex-basis: calc(33.33% - 10px);
}

<div class="__main">
<div class="__article">
	<div class="div__img">
		<img src="http://via.placeholder.com/300x400" width="100%" />
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="__article">
	<div class="div__img">
		<img src="http://via.placeholder.com/300x400" width="100%" />
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
	<div class="__article">
	<div class="div__img">
		<img src="http://via.placeholder.com/300x400" width="100%" />
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>

(我仅在该片段上删除了用于演示目的的媒体查询(