移除图片周围的默认边框 - Chrome浏览器 [英] Removing default border around an image - Chrome browser

问题描述

我不相信我第一次跑这个问题。

我有一个带有class属性的img标签在锚标签下。

所以我的html看起来像：

 < ul id =racing-menuclass =accordion-menu list-unstyled> 
< li> 
< a idsomethingname classsomething> 
< img class =icon_71> 
< / a> 
< / li> 
< / ul> 
  

CSS

  .icon_71 {
 background：url（../../ cms / images / sports / something.png）no-repeat; 
 width：36px; 
 height：22px; 
 margin：0 10px 0 0; 
 float：left; 
} 
  

我尝试了以下解决方案，以避免Chrome浏览器的默认边框

1）border：0
2）outline：none
3）将img类更改为img id

$ b b

4）设置

  a img {
 border：none 
} 
 
a img {
 border：0 
} 
  

解决方案

您的< img> 标记没有 src 属性，因为您设置背景with css。

 < img class =icon_406> 
  

这是无效的html - 如果你打算通过css使用 ; span> 或类似的，不需要 src 属性的规范。或通过< img> 元素的 src 属性加载图像图标。

Chrome显示边框，因为它找不到图像（与 src 里面有一个断开的链接一样） - 但是图标显示，因为css仍然能够将类样式应用于空的< img> 元素。

I can't believe I ran on this problem for the first time. I have searched lot of other similar question on SO regarding the same issue, but none of them worked for me.

I have a img tag with a class attribute under anchor tag.

So my html looks like:

<ul id="racing-menu" class="accordion-menu list-unstyled">
  <li>
    <a id"something" name class"something">
      <img class="icon_71">
    </a>
  </li>
</ul>

CSS

.icon_71 {
  background: url(../../cms/images/sports/something.png) no-repeat;
  width: 36px;
  height: 22px;
  margin: 0 10px 0 0;
  float: left;
}

I tried the following solutions in order to avoid default border on Chrome browser

1)border: 0 2)outline: none 3)changing img class to img id

4)Setting

a img {
  border:none
} 

a img {
  border:0
}

解决方案

Your <img> tag does not have a src attribute since you are setting background with css.

<img class="icon_406">

This is invalid html - if you intend to implement icons through css use <span> or something similar that does not require src attribute by specification. Or load the image icons through src attribute of <img> element.

Chrome displays a border since it cannot find the image (same as if the src had a broken link inside) - but the icon shows since css is still able to apply the class styling to the empty <img> element.

这篇关于移除图片周围的默认边框 - Chrome浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！