前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图,

正常的显示状态是这样

  

首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u3,基于webkit开发的,平时并没有用过,应该是在细节处理上加了一些优化功能。

说回问题,第一眼看觉得可能是不同尺寸屏幕导致某个元素高度超出了,结果并不是这样。找了一会儿,终于发现是那一块的背景图片没有显示。图片并没有报404,也没有被其他属性覆盖, 而且上下文中的背景图都能正常显示,唯独这个不显示。

描述一下这个图片吧,这是一个高度1px的图片,两端透明带阴影效果,中间是白色背景的图片。

设置的属性是

  1. background: url(../images/detail_middle.png) top repeat-y;
  2.  
  3. background-size: 100%;

(不知道经验丰富的人看到这里能不能发现问题 …… )

背景占满屏幕,垂直方向repeat 在我看来属性没什么问题 为什么图片就是不显示呢? 图片放在其他元素上可以显示,浏览器已经禁止了缓存,检查没有冲突属性,background-color可以正常生效……

召唤度娘!

由于是只存在于UC中的兼容问题,所以首要怀疑对象肯定是这种乱七八糟的浏览器了。

查了查UC有没有什么独特的渲染机制,无果。

再精确点,查查UC对图片加载,尤其是background相关属性有没有什么“特叔服务”,查到了一个可能的原因。

一些浏览器有广告过滤功能,在渲染页面时会自动将一些可能是广告的元素剔除掉,我猜那张图片有可能是由于这个原因没被显示出来。但是无论是标签的class,id还是图片的名字,都不包含广告意味的字眼,换了一些名字 仍然不能纠正问题,不知道怎么改了,线索好像断了。

此时我意识到了一件事,我该回家休息了~

运气好的话明天可能它自己就好了也说不定呢。

回去的路上想了想,感觉不是广告筛除的原因,因为同样的元素加上这张背景图都可以显示。 那么到底是什么原因导致的这个问题?上一个下一个元素显示都正常,只有这个有问题, 那应该仔细看看它们都有哪些区别就好了。

按着这个思路,第二天很快就发现了问题的根源。

在将background-size:100%改为contain后,问题解决了。

愉快地更新代码,并且测试通过后,我开始考虑引发问题的原因。 现在我并不知道为什么这么改就没有问题了。

首先区分一下background-size:100%,contain和cover这三者间的区别:

cover:图片填满整个容器,不变形;

contain:图片在不超出容器的情况下放大到最大,不变形;

100%:图片宽高设为容器的宽高的100%,可能会变形。

在我看来,在这个场景中,contain和100%的效果应该是一样的,但是问题出在100%上。

background-size是CSS3新增的属性,除了提供的cover和contain两个属性值外,还可以通过传递两个参数 随意设置宽度和高度,当只传递一个参数的时候,第二个参数为默认值,即auto。

而我想当然地以为background-size:100% 就等同于 background-size:100% 100% 了。

后来我又试了下,写成 background-size:100% 100%确实也是没问题的,而且如果这样写也就不再需要repeat-y了。

所以,问题就出在这里,在将background-size的纵坐标值设为auto的同时,将background-repeat设为repeat-y, 在UC浏览器中会出现背景图片无法显示的情况(大部分浏览器中还是不会有这种问题的),而造成这个问题的原因我就不再追查了,也许这种写法本身就并不规范,UC在处理这种代码的时候兼容性并没有考虑到。以后还是不要出现这种写法就好。

总结:

1,UC浏览器中background-repeat的repeat属性不要与background-size的auto属性同时运用,可能会无法显示背景图案;

2,background-size只传一个值时,另一个值为默认的auto,并不像background-position等属性一样一个值可以当两个值用;

3,如果只是记录解决方法的话只要上两条总结就够了,这篇随笔更主要的是记录了我解决并理解问题的思路和过程,希望能对以后的我或者更多的小伙伴们起到帮助的作用。

background属性冲突导致的部分浏览器背景图片不显示问题的更多相关文章

  1. extjs中新建窗体时,给窗体添加背景图片不显示问题之一

    1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了  layout: 'fit', Ext.create('Ext.Window', { title: ...

  2. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  3. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  4. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  5. ie8 background背景图片不显示问题

    在chrome,FF可以显示,但是在ie8背景图片显示不出来 css改为如下可以正常显示: background: url(../images/goods.png) no-repeat !import ...

  6. 有关background 背景图片不能显示

    首先有两个概念 绝对路径,从根目录为起点到你所在的目录: 相对路径,从一个目录为起点到你所在的目录. 例如:              ┍ A文件夹           C -|            ...

  7. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

  8. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  9. Chrome浏览器记住密码后input框黄色背景且背景图片不显示的问题

    Chrome浏览器记住密码后再进入登录页后,输入框背景颜色变为黄色,字体颜色变成#000黑色,且添加的背景图片也那不显示了,进入审查元素后,发现浏览器默认给输入框添加了样式,并且无法通过importa ...

随机推荐

  1. hsy单词

    题意:略 在ac自动机上,一个节点出现的次数等于能通过fail到它的节点的次数之和.而叶节点就等于它被爬过的次数. #include <iostream> #include <cst ...

  2. 分别用Excel和python进行日期格式转换成时间戳格式

    最近在处理一份驾驶行为方面的数据,其中要用到时间戳,因此就在此与大家一同分享学习一下. 1.什么是时间戳? 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01 ...

  3. UML入门学习

    在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...

  4. count性能

    表有主键列,count(1)的效率会稍微高于count(*),count(主键列)效率会高于count(1).表没有主键列,count(1)效率会高于count(*) count(1).count(* ...

  5. FPM二:简单的APPLICATION-TABSTRIP(OIF)

    1.新建WDA程序ZLYFPM002 2.新建视图2,窗口2,并将视图2分配到窗口2. 3.继承UIBB类IF_FPM_UI_BUILDING_BLOCK 4.创建WDA 应用程序: 5.创建WDA ...

  6. python线程condition条件锁应用实例

    import time import threading # 吃火锅鱼丸 guo = [] suo = threading.Condition() #条件锁 # 生产者负责生产 class Produ ...

  7. leetcode感想

    想想要参加秋招了,重新开始刷leetcode,记录一下自己在过程遇到的问题. 算法优化: 1.合并if分支. 2.将所有可以直接给出结果的特殊情况放在最前面直接返回.

  8. hdu6415 记忆化搜索或找规律

    Rikka with Nash Equilibrium Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Sub ...

  9. Spvmn测试环境搭建及其安全性讨论

    一.说明 这几天都在做设备的协议分析,然后看到有个叫Spvmn的不懂要怎么操作才能触发其操作过程,问了测试部的同事说也没有测试文档,自己研究了一下这里做个记录. 按我现在理解,各厂商有自己的私有协议. ...

  10. day2 购物车

    需求: 商家入口: 1.商品列表永久保存(暂时使用存储在文件,也可以使用sqlite)里. 2.商家可以增加商品,也可以修改商品价格 买家入口: 1.购物车信息永久保存,暂时使用存储在文件,也可以使用 ...