background-image 不生效的一种可能 - url少写一个单引号的bug.md

声明下,文中用到的浏览器都是当前日期(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
请求

经测试

  1. 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内核。

图片来自《低俗小说》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,281评论 19 139
  • 浏览器发展史 现在浏览器已经成为网上生活的重要家园和工具。而从1991年,Web之父Tim Berners-Lee...
    波段顶底阅读 17,327评论 6 86
  • 十七岁那日不要脸参加了挑战 明星也有训练班短短一年太新鲜 记得四哥发哥都已见过面 后来荣升主角太突然 廿九岁颁奖的...
    天行者旺得福阅读 234评论 0 0
  • 1.方法:方法就是对一片代码包装起来,给这片代码按上一个名字。什么时候用到这片代码就调用这个名字就可以了。1.方法...
    凯哥学堂阅读 110评论 0 0
  • 你要的清静单调都有了。然后你自身呢,为什么,在你身上已看不到任何的光鲜亮丽,还是以前的光鲜亮丽都是你幻想出来的假设...
    清澈明亮天天向上阅读 202评论 0 0