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

Question

我无法摆脱社交图标周围的框架(请参阅 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>

Answer 1

我不确定究竟是什么导致了这种行为，但你不应该使用 <img>这里。 <img> 无效没有 src .

你应该使用 <div>反而。查看此版本:http://jsfiddle.net/r7g8r/3/ .它没有此边框，并且在 Chrome 和 Firefox 中都可以使用(而您的版本在 FF 中不起作用)。