Question

我有一个HTML按钮，在某些文字的顶部显示一个图标：

<button class="btn btn-link center">

    <img class="connect">
    <br/>
    CONNECT

</button>

我的图像状态在CSS中定义：

.connect{
    background-image:url('../images/connect_rest.png');
    background-repeat:no-repeat;
    width:60px;
    height:60px;
} 

.connect:hover{
    background-image:url('../images/connect_hover.png');
    background-repeat:no-repeat;
    width:60px;
    height:60px;
}

.connect:active{
    background-image:url('../images/connect_active.png');
    background-repeat:no-repeat;
    width:60px;
    height:60px;
}

那么，为什么我的盒子周围有白色边框？我知道了，我知道我在图像元素上设置背景图像时很时髦。但是，我需要这与IE8兼容，所以我无法设置＆＃34;内容＆＃34; CSS中的属性。

感谢任何有用的提示。

Answer 1

默认情况下，任何没有设置src属性的img都将使用灰色边框设置样式。

这就是为什么没有办法删除该边框，因为它是浏览器的默认设置。

如果你必须使用按钮内的元素不要使用没有src的img。

另外一般情况下使用它而不设置width:0;和height:0;不是一个好主意。

我为您构建了一个快速演示，向您展示按钮内元素之间的区别：

使用img未设置src属性或为空。
img与src
span

<强>样本

＆＃13;

.img-no-src, .span{
    background-image:url('http://placehold.it/200x200');
    background-repeat:no-repeat;
    background-size:cover;
    width:60px;
    height:60px;
    display:block;
    margin:0 auto;    
    border: none;
    -webkit-appearance:none; 
     margin:10px auto; 
} 

.img-no-src:hover{
    background-image:url('http://placehold.it/200x200/020/029');
    background-repeat:no-repeat;
    width:60px;
    height:60px;  
}

.img-no-src:active{
    background-image:url('http://placehold.it/200x200/020/029');
    background-repeat:no-repeat;
    width:60px;
    height:60px;
}
.only-img{
    width:60px;
    height:60px;
    display:block;
    margin:10px auto; 
    
}

＆＃13;

<button class="btn btn-link center">
    <img class="only-img" src="http://placehold.it/200x200/" />
    with img with src
    <img class="img-no-src"  />
    with img with no src
    <span class="span"></span>
    with span
</button>

＆＃13;

Answer 2

尝试将background：none;在.connect类上。虽然不使用按钮，但为什么不使用span或div，因为你基本上都取消了所有的按钮功能呢？

带有背景图像的图像标签有边框

2 个答案: