Question

我无法摆脱社交图标周围的框架（参见jsfiddle：http://jsfiddle.net/r7g8r/2/）。我尝试了Img border: 0和“无”但没有成功。怎么了？感谢。

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中不起作用）。

Answer 2

尝试

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

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

2 个答案: