尤明明Blog

网站建设外包|网站切图外包,技术不仅是一种专业,更是一种责任!

您的当前位置: 首页 » 前端学习 » css3+html5 »

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

2021-02-09   Umming   css3+html5    评论(0)    浏览(37)


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

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

QQ截图20210209111730.png

如果数据只有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值


标签: 浏览器兼容性

本文链接:https://www.umming.com/css3_html5/269.html     百度已收录

声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!


发表评论: