在Chrome / IE9中删除图像边框

Question

我正试图摆脱Chrome和＆amp ;;中每张图片的细边框。 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错误，忽略了“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

而不是CSS中的border: none;或border: 0;，您应该：

border-style: none;

你也可以将它放在图片标签中，如下所示：

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

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

• 使用<div>代替<img>元素（无论如何，有效创建带有背景图片的元素，<img>标记确实未被使用）< / LI>
• 如果您想要/需要<img>标签，请使用下面的Randy King解决方案
• 定义图片src

Answer 3

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

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

在添加src

之前，它将完全隐藏IMG标记

Answer 4

在img标签中添加属性border =“0”

Answer 5

如果您在加载图片时尝试修复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%;
}

这会使边框隐藏在容器的溢出中，您将看不到它。

转过来：

进入：

Answer 6

我喜欢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标签时用“”将其关闭，否则格式化看起来很时髦。

Answer 7

如果您没有定义src或者sg属性在img标记中为空，则大多数浏览器都会创建边框。要解决这个问题，请使用透明图像作为src：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">

Answer 8

在你的img src标签中，添加一个border =“0”，例如<img src="img.jpg" border="0">，按照@Amareswar上面的解释

Answer 9

您可以通过将text-indent设置为一个非常大的数字来删除边框，但图像的alt也会消失。 试试这个

img:not([src]) {
    text-indent: 99999px !important;
}

Answer 10

内联css

<img src="logo.png" style="border-style: none"/>

Answer 11

使用border =“0”是一种情感方式，但您需要为每个图像添加此属性。

我使用以下jQuery为每个图像添加此属性，因为我讨厌这些轮廓并围绕图像边框。

$(document).ready(function () {
        $('img').each(function () {
            $(this).attr("border", "0");
        });
    });

Answer 12

在div标签中显示.png-image时遇到了类似的问题。在图像的一侧渲染了一条很薄的（1 px）黑线。要修复它，我必须添加以下CSS样式：box-shadow: none;

Answer 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;
}

Answer 14

我使用填充样式修复它：

#picture {
    background: url("../images/image.png") no-repeat;
    background-size: 100%;
}

.icon {
    height: 30px;
    width: 30px;
    padding: 15px;
} 

边框正在消失，而您正在增加填充值。找到自己的价值。

Answer 15

它对我有用。花了几天让我发疯。

img.logo
{
    display:block;
    width:100%;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
}

Answer 16

解决方案是将大纲样式设置为无（即，大纲）：无，与我一起使用

Answer 17

首先使用小型尺寸的photoshop创建透明的图像类型PNG。 然后在您的课程中添加：

content:url("url of your blank png");