css - 在 Chrome/IE9 中去除图像边框

Question

我正试图摆脱 Chrome 和 IE9 中每张图片出现的细边框。我有这个 CSS:

outline: none;
border: none;

使用 jQuery，我还在每个图像标签上添加了一个 border=0 属性。但是图像中显示的边框仍然出现。有什么解决办法吗？

body {
    font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
    outline: none;
    border: none;
}
.icon {
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: -48px -144px;
    background-image: url(theme/images/ui-icons_0078ae_256x240.png);
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 3px;
}

<h1>Dashboard <img class="icon" border="0"></h1>

见附件截图:

Answer 1

这是一个 Chrome 错误，忽略了“border:none;”风格。

假设您有一张图片“download-button-102x86.png”，大小为 102x86 像素。在大多数浏览器中，您会为其宽度和高度保留该尺寸，但无论您做什么，Chrome 都会在那里绘制一个边框。

因此，您让 Chrome 认为那里什么也没有——大小为 0px x 0px，但“填充”的数量正好适合按钮。这是我用来完成此操作的 CSS id block ...

#dlbutn {
    display:block;
    width:0px;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

瞧!无处不在，摆脱了 Chrome 中的轮廓/边框。