声明下,文中用到的浏览器都是当前日期(2016-08-24)版本,大版本号如下:
- chorme:52(mac)
- ff:46(mac)
- safari:9
- ie:11,
- edge:25
- QQ浏览器:9.5(win)
朋友遇到个bug,效果在电脑上都是window下测试都ok,但是微信上有问题;
�前情不写,直接上demo代码:
<style>
.inner{
width:100px;
height:100px;
border:1px solid green;
background-repeat:no-repeat;
background-size:cover;
}
</style>
<body>
<div class="inner" style="background-image:url('a.jpg)"></div>
<div class="inner" style="background-image:url('a.jpg?12389123912)"></div>
</body>
注意:url后面只有一个单引号
效果:
经测试
- chrome/ff/ie/edge浏览器会自动把单引号后面的都算作连接,所以两次请求分别是:
a.jpg)
和a.jpg?123123821)
,显然前一个找不到对应的处理请求,而第二个请求因为?
原因(后面尾巴算作参数),导致图片正常显示;
2)而safari和qq浏览器则不支持url只有一个单引号的的情况直接不处理。较新版本的微信,android下是基于qq浏览器的X5内核,ios下则基于内置浏览器(safari)或者X5(出处),所以在微信上与此类效果一致,即两张图片都不显示;
对于这两类浏览器的处理,我更倾向于认为1)类的处理形式算作一个bug,大家各有理解吧;
朋友很不巧用了?时间戳
的形式,所以电脑端显示正常,而微信上则出现了问题;
而且因为url中地址太长,在chrome调试的情况下,地址都换行了,一眼根本瞅不出来是少了个单引号;
对于微信H5兼容性的问题,如果需要微信授权就找微信自家的调试工具,否则的话可以下个QQ浏览器跑跑效果,毕竟是基于同样的X5内核。
图片来自《低俗小说》