关于img标签浏览器自带的边框，清除边框的解决方式(即img[src=""] img无路径情况下，灰色边框去除解决方法)

详解img[src=""] img无路径情况下，灰色边框去除解决方法

1.Js解决办法

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4         <title></title>
 5     </head>
 6     <body>
 7     <img src="error.jpg" onerror="whenError(this)">
 8     </body>
 9     <script>
10     function whenError(a){
11         a.onerror=null;
12         a.src='path_default.jpg';
13         console.log('图片出错的时候调用默认的图片');
14     }
15     </script>
16 </html>

2.绝对定位聚焦解决方案

 1 <!DOCTYPE html>
 2 <html>
 3  
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>absolute聚焦解决方案</title>
 7     </head>
 8  
 9     <body>
10         <p class="container-img">
11             <img class="common-icon login-icon" src="" width="38" height="38">
12         </p>
13  
14     </body>
15     <style type="text/css">
16         .container-img {
17             position: relative;
18             display: inline-block;
19             width: 36px;
20             height: 36px;
21             overflow: hidden;
22              
23         }
24         .container-img img {
25             position: absolute;
26             top: -1px;
27             right: -1px;
28             background: url(img/common-icon.png) no-repeat;
29             background-position: 0px 1px;
30         }
31     </style>
32  
33 </html>

3.margin聚焦解决办法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>margin聚焦解决方案</title>
 6     </head>
 7  
 8     <body>
 9         <p class="container-img">
10             <img class="common-icon login-icon"  src="" width="38" height="38">
11         </p>
12  
13     </body>
14     <style type="text/css">
15         .container-img {
16             display: inline-block;
17             width: 36px;
18             height: 36px;
19             overflow: hidden;
20         }
21         .common-icon {
22             display: inline-block;
23             background: url(img/common-icon.png) no-repeat;
24             background-position: 0px 1px;
25             margin: -1px;
26         }
27     </style>
28 </html>

4.css隐藏

1 img[src=""],img:not([src]){
2     opacity: 0;
3     border:none;
4     visibility: hidden;
5     max- none;
6 }