在Chrome / IE9中删除图片边框 [英] Removing the image border in Chrome/IE9

问题描述

我试图摆脱出现的每一个图像的薄边框在CHrome& IE9。
通过CSS，我设置outline：none; border：none;使用jQuery，我还为每个图像标记添加了border = 0属性。但是图像中所示的边框仍然出现。任何解决方案？

I am trying to get rid of the thin border that appears for every image in CHrome & IE9. Thru CSS, I set outline: none; border: none; Using jQuery, I also added the border=0 attribute for every image tag. But the border as shown in the image still appears. Any solution?

从Chrome开发者为该img附加HTML代码段和CSS堆栈

Attaching a HTML snippet and the CSS stack from Chrome Dev for that img

<h1>Dashboard 
<span class="help-inline icon_help ui-corner-all ichack"><img class="ui-icon ui-icon-help  icon ui-icon-blue" border="0"></span>
</h1>

img[border=0] {
border-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
element.style {
}
Matched CSS Rules
content.css:159
.icon {
margin-right: 2px;
display: inline-block;
position: relative;
top: 3px;
}
common.css:236
.ui-icon-blue {
background-image: url(theme/images/ui-icons_0078ae_256x240.png);
}
common.css:234
.ui-icon-blue, .ui-icon-yellow, .ui-icon-orange, .ui-icon-green, .ui-icon-white, .ui-icon-red {
height: 16px;
width: 16px;
}
common.css:230
.ui-icon {
background-image: url(theme/images/ui-icons_4eb305_256x240.png);
}
jquery-ui-1.8.2.custom.css:216
.ui-icon-help {
background-position: -48px -144px;
}
jquery-ui-1.8.2.custom.css:83
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_808080_256x240.png);
}
jquery-ui-1.8.2.custom.css:30
.ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
content.css:29
img, a img {
outline: none;
border: none;
}
common.css:27
img, a img {
outline: none;
border: none;
}
Inherited from span.help-inline.icon_help.ui-corner-all.ichack
common.css:325
.help-inline {
font-size: small;
}
Inherited from h1
content.css:70
.content h1 {
font-size: 18px;
line-height: 32px;
color: black;
}
user agent stylesheet
h1 {
font-size: 2em;
font-weight: bold;
}
Inherited from table#content-table
user agent stylesheet
table {
border-collapse: separate;
border-spacing: 2px;
}
Inherited from div#content
content.css:39
#content {
font-size: 10pt;
}
Inherited from body
Style Attribute {
font-size: 100%;
}
content.css:17
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
common.css:15
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}

查看附件屏幕截图：

推荐答案

而不是border：none;或border：0;在你的css中你应该有

Instead of border:none; or border:0; in your css you should have

border-style:none;

您也可以将其放在图片标签中，如下所示

You could also put this in the image tag like so

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

EDIT

这不适用于没有SRC的IMG。上面是更多的那些讨厌的链接边界显示在一些浏览器和一些其他应用程序，边界拒绝玩好。当没有SRC时显示的细边界是因为chrome显示实际上在您定义的空间中不存在图像。如果您遇到此问题 1）使用DIV而不是IMG元素（有效地创建一个带有背景图片的元素是您正在做的，IMG标签确实没有被使用）
2）如果您需要/需要IMG标记，请使用以下的Randy King解决方案
3）定义图像src

This will not work for an IMG with no SRC. The above is more for those nasty link borders that show up in some browsers and a few other applications where borders refuse to play nice. The thin border that appears when there is no SRC is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue either 1) Use a DIV instead of an IMG element (effectively creating an element with a background image is all you are doing anyway, the IMG tag really isn't being used) 2) If you want/need an IMG tag use Randy King's solution below 3) Define an image src

这篇关于在Chrome / IE9中删除图片边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！