在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 bug,忽略了"border:none;" 样式.

假设您有一个图像"download-button-102x86.png",大小为102x86像素.在大多数浏览器中,您可以保留其大小的宽度和高度,但Chrome只是在那里绘制边框,无论您做什么.

所以你欺骗Chrome认为没有任何东西 - 大小为0px xpx,但是恰好有适当数量的"填充"以允许按钮.这是我用来完成这个的CSS id块...

#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中的轮廓/边框.

Answer 2

取而代之的border: none;或border: 0;在你的CSS,你应该有:

border-style: none;

你也可以把它放在图像标签中,如下所示:

<img src="blah" style="border-style: none;">

除非图像没有,否则它们都可以工作src.以上是针对那些在边框拒绝播放的浏览器中出现的令人讨厌的链接边框.没有时出现的细边框src是因为chrome显示实际上您定义的空间中不存在图像.如果您遇到此问题,请尝试以下方法之一:

• 使用一个元素<div>而不是一个<img>元素(有效地创建一个带有背景图像的元素,无论如何你都在做,<img>标签真的没有被使用)
• 如果你想/需要一个<img>标签,请使用下面的Randy King的解决方案
• 定义图像 src

Answer 3

对于任何想要在src为空或没有src时摆脱边框的人只需使用此样式:

IMG[src=''], IMG:not([src])      {opacity:0;}

它将完全隐藏IMG标记,直到您添加src

Answer 4

在img标记中添加属性border ="0"