background属性冲突导致的部分浏览器背景图片不显示问题
前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图,
正常的显示状态是这样
首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u3,基于webkit开发的,平时并没有用过,应该是在细节处理上加了一些优化功能。
说回问题,第一眼看觉得可能是不同尺寸屏幕导致某个元素高度超出了,结果并不是这样。找了一会儿,终于发现是那一块的背景图片没有显示。图片并没有报404,也没有被其他属性覆盖, 而且上下文中的背景图都能正常显示,唯独这个不显示。
描述一下这个图片吧,这是一个高度1px的图片,两端透明带阴影效果,中间是白色背景的图片。
设置的属性是
background: url(../images/detail_middle.png) top repeat-y; 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属性冲突导致的部分浏览器背景图片不显示问题的更多相关文章
- extjs中新建窗体时,给窗体添加背景图片不显示问题之一
1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了 layout: 'fit', Ext.create('Ext.Window', { title: ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容: 添加红框中的内容即 ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
- ie8 background背景图片不显示问题
在chrome,FF可以显示,但是在ie8背景图片显示不出来 css改为如下可以正常显示: background: url(../images/goods.png) no-repeat !import ...
- 有关background 背景图片不能显示
首先有两个概念 绝对路径,从根目录为起点到你所在的目录: 相对路径,从一个目录为起点到你所在的目录. 例如: ┍ A文件夹 C -| ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
- Chrome浏览器记住密码后input框黄色背景且背景图片不显示的问题
Chrome浏览器记住密码后再进入登录页后,输入框背景颜色变为黄色,字体颜色变成#000黑色,且添加的背景图片也那不显示了,进入审查元素后,发现浏览器默认给输入框添加了样式,并且无法通过importa ...
随机推荐
- cmd非运行完再保存,结果显示&保存同时进行
#coding:utf-8 """ fps信息获取到文件 """ import sys import subprocess class Lo ...
- 【期望dp】绵羊跳弹簧
[期望dp] 绵羊跳弹簧 >>>>题目 [题目] T 组数据.对于每一组数据,有n+1 个格子从0 到n 标号,绵羊从0 号结点开始,每次若在 x 位置掷骰子,令掷出的数为nu ...
- 手动脱壳—dump与重建输入表(转)
文章中用到的demo下载地址: http://download.csdn.net/detail/ccnyou/4540254 附件中包含demo以及文章word原稿 用到工具: Ollydbg Lor ...
- Project中最常用的注意点
最近用Project 2013做计划,做工作量的评估,感觉确实牛逼得一塌糊涂.这几天自己试着做一些手工的计算,与Project的结果进行对比,发现学到的很多东西,网上确实很难道到,花了几天的时间研究, ...
- 关于leal和mov
最近在学习leal的时候遇到了一点非常迷惑的地方,就是leal是用来取有效地址的,但是为什么它也可以实现赋值呢?偶然发现一个博客讲的不错,遂自己记录一下 一个这样的例子 leal 7(%edx,%ed ...
- 国外服务器:org.xml.sax.SAXParseException
改为: xsi:schemaLocation="http://www.springframework.org/schema/beans classpath:org/springframewo ...
- 配置rpm本地源及局域网环境下使用
LInux个人开发过程中可以直接连到公网,所以想要安装各种软件时直接安装即可,但工作环境往往很让人头疼. 如果应用场景是没法链接外网的,公司内部绝大多数情况下是在自己的局域网下玩,这时候想装个软件是相 ...
- 刷题upupup【Java中HashMap、HashSet用法总结】
HashMap: 常用操作 1. containsKey() 判断HashMap是否包含key 2. containsValue() 判断HashMap是否包含“值为value”的元素 3. get( ...
- Jenkins安装使用教程
一.说明 持续集成:Continuous integration,CI.包括两层含义,一是指项目的每个开发人员每天都向项目代码仓库要通过git等提交他们的代码,二是指在代码提交后实现自动化的构建.部署 ...
- 针对小程序for循环绑定数据,实现toggle切换效果(交流QQ群:604788754)
如有更好的方法实现,可以留言或加群交流学习.谢谢(交流QQ群:604788754) WXML: <block wx:for="{{datanum}}" wx:for-inde ...