img标签的一些问题

1   img标签空白像素问题

实际上，这其实是inline元素搞的鬼。在html5和css3中，图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙，也就是我们上文出现的问题了。

第一种解决方案：把img变成块元素：display：block；

第二种解决方案：修改一下它的垂直对齐方式：vertical-align：middle、top、bottom；

第三种解决方案：使用浮动，让他漂浮起来：float：left；

第四种解决方案：把父元素的文字大小设置为0：font-size：0；这种方法不推荐，除非是实在想不出来办法的时候；

第五种：改变父对象的宽高，给父对象设置overflow：hidden；

 

2  图片引用不正确时，边框无法去掉问题

img标签在src路径不正确，找不到引用的资源；或者src值为空时；且没有设置alt属性，图片就会出现1px的边框。这时设置img的border是不起作用的。想去掉边框可以通过 下面代码来实现。

src出错时存在灰色边框

 img[src=""],img:not([src]){

            opacity: 0;

        }