我试图摆脱出现的每一个图像在CHrome& IE9。
通过CSS，我设置大纲：无; border：none;使用jQuery，我还为每个图像标记添加了border = 0属性。但是图像中所示的边框仍然出现。任何解决方案？
通过CSS，我设置大纲：无; border：none;使用jQuery，我还为每个图像标记添加了border = 0属性。但是图像中所示的边框仍然出现。任何解决方案？
附加HTML代码段和Chrome浏览器的CSS堆栈为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",sans-serif;
}
查看附件屏幕截图：
解决方法
而不是border：none;或border：0;在你的css你应该有
border-style:none;
你也可以把它放在图像标签中
<img src="blah" style="border-style:none;">
任一将工作。
编辑
这对于没有SRC的IMG不起作用。上面是更多的那些讨厌的链接边界显示在一些浏览器和一些其他应用程序，边界拒绝玩好。当没有SRC时显示的细边界是因为chrome显示实际上没有图像存在于您定义的空间中。如果你有这个问题1)使用DIV而不是IMG元素(有效地创建一个背景图像的元素是你正在做的，img标签真的没有被使用)2)如果你想/需要一个img标签使用Randy King的解决方案如下3)定义图像src
