为什么我的图像包装在全宽度屏幕上使用IE 11？
为什么我的图像包装在全宽度屏幕上使用IE 11？
提问于 2018-02-20 19:33:49
我有一个问题，在IE11和边缘的这段代码，第三张图片在右边的第二行，而窗口仍然是完全宽度！但是它不应该做下面的检查代码。
当我缩小屏幕时，图像或__article div正在响应，但它似乎在600个像素后才能工作。我对此做了很多研究，但找不到任何线索。
有人能帮忙吗。
如果您想测试代码，可以使用cross browser testing、创建免费帐户和使用实时测试。
*,
*: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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-20 20:13:47
首先，去掉所有这些前缀，它们当然是不需要的，特别是webkit的前缀。如果您试图支持IE10，那么可能需要MS前缀，但对于IE11可能不需要。
由于添加了填充，元素正在包装。box-sizing:border-box 和 display:flex 似乎在IE11上相处得不好。因此，使用flex-basis：calc(33.33% - 10px);来补偿两个5 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>
(为了演示起见，我删除了媒体查询，仅限于片段)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48892894
复制相关文章
相似问题
腾讯云开发者
