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