如何摆脱我的社交图标周围的框架？

我无法摆脱我社交图标周围的框架（请参阅jsfiddle：http://jsfiddle.net/r7g8r/2/）。我试过Img border: 0和“none”但没有成功。哪里不对？谢谢。如何摆脱我的社交图标周围的框架？

CSS

img { 
    max-width: 100%; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
} 
.social { 
    position: absolute; 
    right: 50px; 
    top: 13px; 
    text-align: right; 
} 


.social ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 

} 
.social li { 
    margin: 2px; 
} 

.fbbl, .fbbw, .linkedinbl, .linkedinbw, .vimeobl, .vimeobw{ 
    background: url(images/sprites.png) no-repeat; 

} 



.fbbw{ 
    background-position: -51px -1px ; 
    width: 34px; 
    height: 35px; 
} 

.fbbw:hover{ 
    background-position: -1px 0; 
    width: 34px; 
    height: 34px; 
} 



.linkedinbw{ 
    background-position: -51px -103px ; 
    width: 34px; 
    height: 35px; 
} 
.linkedinbw:hover{ 
    background-position: 0 -50px ; 
    width: 34px; 
    height: 34px; 
} 


.vimeobw{ 
    background-position: -49px -52px ; 
    width: 34px; 
    height: 35px; 
} 
.vimeobw:hover{ 
    background-position: 0 -103px ; 
    width: 33px; 
    height: 34px; 
}

HTML

<div class="social"> 
      <ul> 
      <li><img class="fbbw"></li> 
      <li><img class="linkedinbw"></li> 
      <li><img class="vimeobw"></li> 
      </ul> 
     </div>

来源

2013-06-02 Greg

在除webkit之外的任何浏览器中都没有边框，但没有边框设置。图片网址已损坏，因此图片无法显示。你确定这不仅仅是webkit中的破碎图像图标吗？您是否尝试过使用有效的图片？ –

奇怪的是，看着计算出来的样式根本没有帮助......我找不到这个边界从哪里来......非常有趣！另外我想说明的是，你的代码在Firefox中不起作用。 – kirelagin

嗨大卫 - 看到结果与一个有效的图像：http://jsfiddle.net/r7g8r/2/同样的问题Tks – Greg

我不知道究竟原因此行为，但你不应该在这里使用<img>。没有src的<img>是无效的。

您应该改用<div>。看到这个版本：http://jsfiddle.net/r7g8r/3/。它没有这个边框，可以在Chrome和Firefox中使用（而你的版本在FF中不起作用）。

来源

2013-06-02 16:41:12 kirelagin

well spotted，我总是忽视了这一点......你也可以将类应用到'li'，所以你不需要一个空的'div' http://jsfiddle.net/r7g8r/ 4 /。或者在现实生活中，将其添加到“a”，因为这可能会成为社交链接 – Pevara

尝试

.social ul li img 
{ 
border-width:0px; 
}

来源

2013-06-02 16:26:32

不能工作不幸的 – Greg

如何摆脱我的社交图标周围的框架？

回答

相关问题