在Chrome/IE9中去掉图片边框

Question

在Chrome/IE9中去掉图片边框

53

我正在尝试去掉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>

请查看附带的截图：

屏幕截图

- Prasad

1

但是图像中显示的边界仍然出现。有截图吗？ - Marcel

我不完全确定我看到了实际的问题。您的屏幕截图显示“仪表板”一词下面有一些破折号，但这些破折号非常像您正在显示的图标的一部分。如果是这样，CSS/Javascript/其他东西都没用。您需要修改实际的图像。 - NotMe

2

@ChrisLively 我认为他指的是问号周围的边框。 - EaterOfCode

我发现以下解决方案更加优雅：https://dev59.com/5W025IYBdhLWcg3w4aCu - Roberto Alarcon

18个回答

53

你的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

- Zach

1

这个修复在我使用的最新版Chrome上没有起作用，但是Randy King的修复方法确实奏效了。谢谢！ - Kevin Dark

嗯...我有最新版本的Chrome，如果它没有被样式表覆盖，我就没有看到它无法工作。Randy King的解决方案肯定会起作用，并且非常适合在网站上经常使用的图像，但是为每个图像编写它很麻烦。我认为Chrome默认不会放置边框，因为如果我有一个带有图像的HTML文件，无论我将其包装在什么中，都不会出现“无意”的边框。这让我觉得可能是你的样式表中某个地方的CSS规则需要消除或覆盖。 - Zach

不是说我一定正确哈哈..只是非常好奇。 - Zach

1

不确定我是怎么获得这些赞的，但显然它修复了其他问题，哈哈。我编辑了我的答案。 - Zach

我有一个没有src的占位符..已经为我修复了，谢谢！ - ptim

显示剩余4条评论

19

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

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

它将完全隐藏IMG标签，直到您添加一个src属性

- John

1

这个修复对于Chrome在懒加载图片方面非常棒。谢谢！ - Tim Bowen

很棒的答案，已点赞。如果您想在加载时显示占位图像，可以查看我的答案，我使用了这里的一些代码。 - aaron-coding

6

在img标签中添加属性border="0"。

- Amareswar

谢谢。但我已经使用jQuery在做这件事了。请看代码片段的第二行，img标签已经有了border="0"属性。 - Prasad

4

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

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

- code19

这个gif有点短 data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 - xer21

3

如果您正在尝试修复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%;
}

这将使边框在容器的溢出情况下隐藏，看不到它。

把这个：

变成这个：

- aaron-coding

如果不允许将不透明度和宽度/高度都设置为0，那么这是一个非常好的解决方法。 - kwiat1990

2

我很喜欢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标签时，请确保用“”关闭它，否则格式会看起来很奇怪。

- sksallaj

太棒了，感谢您想出这个解决方案 - 真的很有效。我做了一个更改：display: inline-block; 我的标签是<icon src="..." />。 - tim

1

在您的img src标签中，添加border="0"，例如：<img src="img.jpg" border="0">，如@Amareswar所述。

- doodoodukes

谢谢。但我已经使用jQuery在做这件事了。请看代码片段的第二行，img标签已经有了border="0"属性。 - Prasad

谢谢Amareswar。这就是你的意思，对吗？<img class="ui-icon ui-icon-help icon ui-icon-blue" border="0">我需要关闭图片标签或者做些什么吗？ - Prasad

1

使用 border="0" 是一种有效的方法，但你需要为每个图像添加这个属性。

我使用了以下 jQuery 为每个图像添加这个属性，因为我讨厌图像周围的轮廓和边框。

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

- OldTrain

1

内联样式

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

- user2645981

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Randy King · Accepted Answer

这是Chrome的一个bug，它会忽略“border:none;”样式。

假设你有一张图片“download-button-102x86.png”，大小为102x86像素。在大多数浏览器中，你会将其大小保留为其宽度和高度，但是Chrome只会在那里绘制边框，而不管你做什么。

所以你可以欺骗Chrome认为那里什么都没有-大小为0px x 0px，但正好有足够的“padding”来容纳按钮。这是我用来实现这一点的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中的轮廓/边框。