删除 Chrome/IE9 中的图像边框
Posted
技术标签:
【中文标题】删除 Chrome/IE9 中的图像边框【英文标题】：Removing the image border in Chrome/IE9 【发布时间】：2011-08-26 03:57:50 【问题描述】：我正在尝试消除 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>见附件截图：
【问题讨论】：
"但仍然出现如图所示的边框。"有截图吗？ 我不完全确定我看到了实际问题。您的屏幕截图在 Dashboard 一词下显示了一些破折号，但这些破折号看起来非常像它们实际上是您正在显示的图标的一部分。如果这是真的，那么 CSS/javascript/Whatever 将无济于事。您需要修改实际图像。 @ChrisLively 我认为他的意思是问号周围的边界 我发现以下解决方案更优雅：***.com/questions/5743083/strange-border-on-img-tag 【参考方案1】：这是一个 Chrome 错误，忽略了 "border:none;"风格。
假设您有一个大小为 102x86 像素的图像“download-button-102x86.png”。在大多数浏览器中，您会为其宽度和高度保留该尺寸，但无论您做什么，Chrome 都会在那里绘制一个边框。
所以你欺骗 Chrome 认为那里什么都没有 - 大小为 0px x 0px，但具有完全正确数量的“填充”以允许按钮。这是我用来完成此任务的 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 中的轮廓/边框。
【讨论】：
这实际上是问题的根源。谢谢 帮了很多忙，直到我自己做了一个，我才意识到我可以使用这种方法，不是很好的解决方案。 我注意到使用此方法时仍然会出现一个小框（几乎不可见）。这是一个仍然存在的 1x1 边界。仔细看，还有人用这个方法看到这个吗？ & 有什么办法解决这个问题？ @aaron-coding - 是的，我也看到了。但是我认为@randy-king 有正确的解决方案 - 我已经稍微修改了它以与泛型类一起使用.borderFix display: block; width: 1px !important; height: 1px !important; outline: none; padding: 0px; margin: -4px; background-image:none !important; background-repeat:no-repeat;
@arron-coding：在我的情况下，除了其他设置之外，还需要“溢出：隐藏”才能摆脱 Chrome 中的小框。【参考方案2】：
您应该在 CSS 中使用 border: none; 或 border: 0;，而不是：
border-style: none;
你也可以像这样把它放在图片标签中：
<img src="blah" style="border-style: none;">
除非图像没有src，否则两者都可以工作。以上是针对某些浏览器中出现的那些讨厌的链接边框，这些浏览器的边框拒绝播放得很好。没有src 时出现的细边框是因为 chrome 显示实际上您定义的空间中不存在图像。如果您遇到此问题，请尝试以下方法之一：
<div> 代替<img> 元素（无论如何，您都在做有效地创建带有背景图像的元素，<img> 标记确实没有被使用）
如果您想要/需要 <img> 标签，请使用下面 Randy King 的解决方案
定义图像src
【讨论】：
这个修复在最新版本的 Chrome 上对我不起作用，但是 Randy King 的修复确实有效。谢谢！ hmm.. 我有最新版本的 chrome，如果它没有被样式表覆盖，我还没有看到它不起作用。无论如何，Randy King 的解决方案肯定会起作用，并且非常适合您在网站上经常使用的图像，但是为每张图像编写它是一件痛苦的事情。我不认为chrome默认设置边框，因为如果我有一个带有图像的html文件，无论我用什么包装，我都无法显示“无意”的边框。让我觉得这是某处的css规则在您需要删除或覆盖的样式表之一中 不是说我肯定是正确的哈哈.. 只是非常好奇 这是我的 jsFiddle 快速测试。在 Chrome 中查看（显然）:) jsfiddle.net/darkkevind/vtNTa Gotycha，不知道我是如何获得投票的，但显然它为某些人解决了一个不同的问题哈哈。我编辑了我的答案。【参考方案3】：对于任何想在 src 为空或没有 src 时摆脱边框的人，只需使用这种样式：
IMG[src=''], IMG:not([src]) opacity:0;
它会完全隐藏IMG标签，直到你添加一个src
【讨论】：
这个修复在延迟加载图像时非常适合 Chrome。谢谢！ 很好的答案，赞成。如果您还想在加载时显示占位符图像，您可以查看我的答案，我使用了这里的一些代码。【参考方案4】：在img标签中添加属性border="0"
【讨论】：
谢谢。但我已经在使用 jQuery 来做这件事了。请看第二行代码sn-p，其中img标签已经有了border="0"属性【参考方案5】：如果你没有定义 src 或者 img 标签中的 src 属性为空，大多数浏览器都会创建一个边框。要解决此问题，请使用透明图像作为 src：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
【讨论】：
这个 gif 有点短 data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7【参考方案6】：如果您正在尝试修复加载图像时的 Chrome 错误，但您还希望您的占位符图像加载使用（例如，使用延迟加载图像）使用可以做到这一点：
.container overflow: hidden; height: 200px; width: 200px
.container img width: 100%; height: 100%
.container img[src=''],
.container img:not([src])
width: 102%;
height: 102%;
margin: -1%;
这将使边框隐藏在容器的溢出中，您将看不到它。
转这个：
进入这个：
【讨论】：
这是一个非常好的修复，如果不透明度和宽度/高度都不能设置为 0。【参考方案7】：我喜欢 Randy King 的解决方案，因为 chrome 忽略了“border:none”样式，但它理解起来有点复杂，并且在 ie6 和更旧的浏览器中不起作用。以他为例，您可以这样做：
css:
ins.noborder
display:block;
width:102px;
height:86px;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
html
<ins class="noborder"></ins>
确保在使用 ins 标记时用 "" 将其关闭，否则格式会看起来很时髦。
【讨论】：
很棒的解决方案。感谢您认为这一点 - 有效。我确实做了一个更改：display: inline-block; 我的标签是 在您的 img src 标签中，添加一个border="0"，例如<img src="img.jpg" border="0">，正如上面@Amareswar 所解释的那样
【讨论】：
谢谢。但我已经在使用 jQuery 来做这件事了。请看第二行代码sn-p，其中img标签已经有了border="0"属性 感谢 Amareswar。这就是你的意思吧？ 需要关闭图片标签什么的吗？【参考方案9】：使用border="0" 是一种有效的方式，但您需要为每张图片添加此属性。
我使用以下 jQuery 为每个图像添加此属性，因为我讨厌图像周围的轮廓和边框。
$(document).ready(function ()
$('img').each(function ()
$(this).attr("border", "0");
);
);
【讨论】：
【参考方案10】：内联css
<img src="logo.png" style="border-style: none"/>
【讨论】：
【参考方案11】：您可以通过将 text-indent 设置为一个非常大的数字来删除边框，但图像的 alt 也会消失。 试试这个
img:not([src])
text-indent: 99999px !important;
【讨论】：
【参考方案12】：在 div-tag 中显示 .png-image 时，我遇到了类似的问题。在图像的一侧渲染了一条细（我认为是 1 px）黑线。为了修复它，我必须添加以下 CSS 样式：box-shadow: none;
【讨论】：
【参考方案13】：与 @aaron-coding 和 @randy-king 所拥有的相同 - 但只是一个更通用的在加载之前隐藏图像边框（即使用 lazy-load.js 或其他东西
（显然我不能在我原来的评论中做一个代码块）
.lazy-load-borderFix
display: block;
width: 1px !important;
height: 1px !important;
outline: none;
padding: 0px;
margin: -4px;
background-image:none !important;
background-repeat:no-repeat;
【讨论】：
【参考方案14】：我使用填充样式修复它：
#picture
background: url("../images/image.png") no-repeat;
background-size: 100%;
.icon
height: 30px;
width: 30px;
padding: 15px;
边框正在消失，而您正在增加填充值。找到自己的价值。
【讨论】：
【参考方案15】：它对我有用。花了几天时间让我发疯。
img.logo
display:block;
width:100%;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
【讨论】：
一般来说，如果答案包含对代码的用途的解释，以及为什么在不介绍其他人的情况下解决问题的原因，答案会更有帮助。【参考方案16】：解决方案是将大纲样式设置为无（即）大纲：无，它适用于我
【讨论】：
【参考方案17】：首先用 Photoshop 创建一个 PNG 透明的图片类型为 mini 尺寸。 那么请在你的课堂上添加：
content:url("url of your blank png");
【讨论】：
【参考方案18】：这是因为你使用了一个没有 src 属性的 img 标签。解决方案是将图像放入 div 中。类似的东西：
<style>
div#uno
display:block;
width: 351px;
height: 500px;
background: url(especificaciones1.png) no-repeat;
div#dos
display:block;
width: 612px;
height: 500px;
background: url(especificaciones2.png) no-repeat;
</style>
<div class="especificaciones">
<div id="uno" class="imag1"></div>
<div id="dos" class="imag2"></div>
</div>
【讨论】：
有时图像必须与img元素一起使用。这个答案对我们需要使用 img 元素没有帮助。以上是关于删除 Chrome/IE9 中的图像边框的主要内容，如果未能解决你的问题，请参考以下文章