在Chrome / IE9中删除图片边框
我试图摆脱Chrome和IE9中出现的每个图像的薄边框。 我有这个CSS：
outline: none; border: none; 使用jQuery，我还在每个图片标签上添加了border=0属性。 但图像中显示的边框仍然显示。 任何解决scheme
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(themehttp://img.dovov.comui-icons_0078ae_256x240.png); margin-right: 2px; display: inline-block; position: relative; top: 3px; }
<h1>Dashboard <img class="icon" border="0"></h1>
见附件截图：
border: none; 或border: 0; 在你的CSS中，你应该有：
border-style: none;
你也可以把它放在图片标签中，如下所示：
<img src="blah" style="border-style: none;">
要么工作，除非图像没有src 。 以上是针对那些在边界拒绝播放的浏览器中出现的那些讨厌的链接边界。 没有src时出现的薄边框是因为chrome显示实际上没有图像存在于您定义的空间中。 如果您遇到此问题，请尝试以下方法之一：
- 使用
<div>而不是<img>元素（有效地创build一个带有背景图像的元素就是你正在做的事情，<img>标签确实没有被使用） - 如果你想/需要一个
<img>标签使用下面的Randy King的解决scheme - 定义一个图像
src
这是一个铬错误，忽略“边界：没有;” 样式。
假设您有一个尺寸为102×86像素的图片“download-button-102×86.png”。 在大多数浏览器中，你会保留这个尺寸的宽度和高度，但是Chrome只是在那里绘制一个边框，不pipe你做什么。
所以，你想让Chrome认为没有什么东西 – 大小为0px×0px，但是有足够的“padding”来允许button。 这是我用来完成这个CSS代码块…
#dlbutn { display:block; width:0px; height:0px; outline:none; padding:43px 51px 43px 51px; margin:0 auto 5px auto; background-image:url(http://img.dovov.comdownload-button-102x86.png); background-repeat:no-repeat; }
瞧！ 在任何地方工作，摆脱在Chrome中的轮廓/边框。
对于任何想在src为空或没有src的情况下摆脱边界的人，只需使用下面的样式：
IMG[src=''], IMG:not([src]) {opacity:0;}
它会完全隐藏IMG标签，直到你添加一个src
在img标签中添加属性border =“0”
我非常喜欢Randy King的解决scheme，因为它忽略了“border：none”的风格，但它有点复杂，并且在ie6和更老的浏览器中不起作用。 以他的榜样为例，你可以这样做：
CSS：
ins.noborder { display:block; width:102px; height:86px; background-image:url(http://img.dovov.comdownload-button-102x86.png); background-repeat:no-repeat; }
HTML
<ins class="noborder"></ins>
确保当你使用ins标签用“”closures它，否则格式会显得很怪异。
如果您正在尝试修复加载图片时的Chrome Bug，但是您还希望您的占位符图片加载使用（例如使用延迟加载图片），请使用以下技巧：
.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%; }
这将使边界被隐藏在容器的溢出，你不会看到它。
打开这个： 
进入这个： 
在你的img src标签中，按照@Amareswar的解释，添加一个border =“0”，例如， <img src="img.jpg" border="0">
使用border =“0”是一种情感方式，但是您需要为每个图像添加此属性。
我用下面的jQuery为每个图像添加此属性，因为我讨厌这个轮廓和图像边界。
$(document).ready(function () { $('img').each(function () { $(this).attr("border", "0"); }); });
内联的CSS
<img src="logo.png" style="border-style: none"/>
如果你没有定义一个src或者src属性在img标签中是空的，大多数浏览器都会创build一个边框。 要解决这个使用透明图像作为源代码：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
在div标签中显示.png图像时，我遇到了类似的问题。 一个薄的（我认为是1px的）黑线被渲染在图像的侧面。 为了解决这个问题，我不得不添加下面的CSS样式： box-shadow: none;
和@ 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; }
我使用填充样式修复它：
#picture { background: url("..http://img.dovov.comimage.png") no-repeat; background-size: 100%; } .icon { height: 30px; width: 30px; padding: 15px; }
边界正在消失，而你正在增加填充值。 find自己的价值。
您可以通过将文本缩进设置为一个非常大的数字来删除边框，但图像的ALT也不见了。 尝试这个
img:not([src]) { text-indent: 99999px !important; }
发生这种情况是因为您使用的是没有src属性的img标签。 解决scheme是将图像放入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>
