响应式切图网站ie10常见坑！

话不多说，前段时间一直在给响应式页面切图，整体采用flex布局，因为flex确实是好用，而且快，只是兼容性差点，但是客户响应式的兼容性也理解，一般到ie10即可，大家也知道，微软已经放弃ie了，新的edge内核已然切换成chrome内核了，呵呵，下面说一下flex布局下，在ie11和ie10中遇到的坑：

首先是使用flex布局，在列表中，如果父标签ul 弹性flex布局justify-content属性给 space-between；那么我们只需要给li宽度值即可，不用考虑左右margin值，那么问题来了，

如果数据只有5条，那么第二行中间就会有空白，那么如何解决呢，我们习惯给ul的伪类:after{content:'';width:32%}宽度和li设置的一样即可；这样问题得到解决了吗？当然chrome内核下，没有问题，ie11没有问题，但是在ie10下，不行，找了半天原因，需要给:after设置一个display值，我就给:after{content:'';width:32%;display:inline-bolck}，然后就解决了。

其他的行内标签使用flex布局后一般宽度都不会有问题，但是在ie10下面就行不行，解决办法还是给标签display值，典型的就span标签了，因为页面中或少或多都会用到span标签！其他标签处理方式相同，那就是标签设置display值