CSS 在 Chrome/IE9 中删除图像边框

Removing the image border in Chrome/IE9

提问by Prasad

I am trying to get rid of the thin border that appears for every image in Chrome & IE9. I have this CSS:

我试图摆脱 Chrome 和 IE9 中每个图像出现的细边框。我有这个 CSS：

outline: none;
border: none;

Using jQuery, I also added a border=0attribute on every image tag. But the border as shown in the image still appears. Any solution?

使用 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>

See attached screenshot:

见附件截图：

采纳答案by Zach

Instead of border: none;or border: 0;in your CSS, you should have:

代替border: none;或border: 0;在你的 CSS 中，你应该有：

border-style: none;

You could also put this in the image tag like so:

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

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

Either will work unless the image has no src. The above is for those nasty link borders that show up in some browsers where borders refuse to play nice. The thin border that appears when there is no srcis because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue try one of the following:

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

• Use a <div>instead of an <img>element (effectively creating an element with a background image is all you are doing anyway, the <img>tag really isn't being used)
• If you want/need an <img>tag use Randy King's solution below
• Define an image src

• 使用 a<div>而不是<img>元素（无论如何，您要做的就是有效地创建带有背景图像的元素，<img>实际上并没有使用标签）
• 如果您想要/需要<img>标签，请使用下面的 Randy King 解决方案
• 定义图像 src

回答by Randy King

It's a Chrome bug, ignoring the "border:none;" style.

这是一个 Chrome 错误，忽略了“border:none;” 风格。

Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.

假设您有一个大小为 102x86 像素的图像“download-button-102x86.png”。在大多数浏览器中，您会为其宽度和高度保留该大小，但无论您做什么，Chrome 都会在那里绘制边框。

So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...

所以你欺骗 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;
}

Voila! Works everywhere and gets rid of the outline/border in Chrome.

瞧！适用于任何地方并摆脱 Chrome 中的轮廓/边框。

回答by John

For anyone who wants to get rid of the border when the src is empty or there is no src just use this style:

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

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

It will hide the IMG tag completely until you add a src

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

回答by Amareswar

Add attribute border="0" in the img tag

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

回答by code19

If u didn't define a src or the src attribute is empty in a img tag most browsers will create a border. To fix this use transparent image as src:

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

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

回答by aaron-coding

If you are trying to fix the Chrome Bug on loading images, but you ALSO want your placeholder image to load use (with Lazy Loading images, for example) use can do this trick:

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

This will make the border be hidden in the container's overflow and you won't see it.

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

Turn this:

转这个：

Into this:

进入这个：

回答by sksallaj

I liked Randy King's solution in that chrome ignores the "border:none" styling, but its a bit complex to understand and it doesn't work in ie6 and older browsers. Taking his example, you can do this:

我喜欢 Randy King 的解决方案，因为 chrome 忽略了“border:none”样式，但理解起来有点复杂，而且它在 ie6 和旧浏览器中不起作用。以他的为例，你可以这样做：

css:

css：

ins.noborder
{
    display:block;
    width:102px;
    height:86px;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

html

html

<ins class="noborder"></ins>

Make sure when you use the ins tag to close it off with a "" or else the formatting will look funky.

确保在使用 ins 标签时用 "" 将其关闭，否则格式会看起来很奇怪。

回答by sksallaj

inline css

内联 css

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

回答by doodoodukes

In your img src tag, add a border="0", for example, <img src="img.jpg" border="0">as per explained by @Amareswar above

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

回答by OldTrain

using border="0" is an affective way, but you will need to add this attribute for each image.

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

i used the following jQuery to add this attribute for each image as i hate this outlines and borders around images.

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

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