iH5中img标签src不给路径就会出现边框————记一次二笔的编码经历

<img/>在src加载失败或没有给的，浏览器会自动给img加上边框。

以下图这样：

产品以为影响美观，必定要pass掉。

原码是这样：

.ctn{ position: relative; width: 2.8rem; height: 2.8rem; border-radius: 3px; overflow: hidden; background: #FFF; } .ctn .title{ position: absolute; top: 0; width: 2.8rem; height: 2.8rem; background:rgba(0,0,0,.35) ; color: #FFF; font-size: .52rem; font-weight: bold; padding:0 .4rem; } .ctn img{ width: 2.6rem; height: 2.2rem; margin: .3rem auto; object-fit: cover; background: url(images/120X120.jpg?201608012) no-repeat center; background-size: 2.2rem; }

<div class="ctn"> <div class="title sn-flex center"> <p>休闲西装</p> </div> <img src=""/> </div>

百度一下，在知乎上找到了解决方案，连接在这https://www.zhihu.com/question/27426689

基于能用css实现就不用js的原则，选择了如下的解决方案：
给img包个div

<div class="ctn"> <div class="title sn-flex center"><p>收腰款</p></div> <div class="img-ctn"> <img src="temp/app_200x200.jpg"/> </div> </div>

.ctn .img-ctn{ width: 2.6rem; height: 2.2rem; margin: .3rem auto; overflow: hidden; } .ctn .img-ctn img{ width: -webkit-calc(2.6rem + 2px); height: -webkit-calc(2.2rem + 2px); width: calc(2.6rem + 2px); height: calc(2.2rem + 2px); background: url(images/120X120.jpg?201608012) no-repeat center; background-size: 1.8rem; margin: -1px; object-fit: cover; }

but，有问题，无图片时上下的border是隐藏了，左右不管怎么样都隐藏不了，暂时没查出来问题，因而改为了这样：

.ctn .img-ctn{ width: 2.6rem; height: 2.2rem; margin: .3rem auto; overflow: hidden; background: url(images/120X120.jpg?201608012) no-repeat center; background-size: 1.8rem; } .ctn .img-ctn img{ width: inherit; height: inherit; object-fit: cover; } /*无src隐藏*/ .ctn .img-ctn img[src='']{ visibility: hidden; }

后来，在控制台调试时，突然灵光乍现，FUCK，是reset样式的问题。

原来，base.css
对img作了这个

img { max-width: 100%; }

hehe，从新又改为这样：

.ctn .img-ctn{ width: 2.6rem; height: 2.2rem; margin: .3rem auto; overflow: hidden; } .ctn .img-ctn img{ width: -webkit-calc(2.6rem + 2px); height: -webkit-calc(2.2rem + 2px); width: calc(2.6rem + 2px); height: calc(2.2rem + 2px); background: url(images/120X120.jpg?201608012) no-repeat center; background-size: 1.8rem; margin: -1px; /*就是这货*/ max-width: none; object-fit: cover; }

ok，提交给开发，终于能够偷懒一会了。

however，改变来的太快。开发发来了一张图：

去开发机上调试一下，瞬间感觉到了深深的恶意。

原来图片的背景图层是透明的，盒子模型的渲染层级是color>src>background-image>background-color，图片空白区域透明天然就显示背景图片了。

img{ background: red url(images/120X120.jpg?201608012) no-repeat center; }

<img src=".png">

感受本身的洪荒之力已经用完了。。。。

at the end，为了规避这种图片出现，直接不给背景图片了，直接经过模板引擎来判断吧

<img src="{$src||'images/120X120.png'}"