当前位置：文江博客话题详情

删除 Chrome/IE9 中的图像边框

发布于 2024-11-07 06:33:34 字数 1023 浏览 1 评论 0 原文

我正在尝试摆脱 Chrome 和 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>

请参阅随附的屏幕截图：

Screenshot

原文

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

outline: none;
border: none;

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

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:

Screenshot

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

戈亓 2024-11-14 06:33:34

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

假设您有一个图像“download-button-102x86.png”，其大小为 102x86 像素。在大多数浏览器中，您会保留其宽度和高度的大小，但 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 中的轮廓/边框。

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

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.

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...

#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.

回复收藏 0 原文

心病无药医 2024-11-14 06:33:34

您应该：

border-style: none;

您也可以将其放在图像标记中，如下所示：

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

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

使用
而不是元素（有效地创建具有背景图像的元素是无论如何，您所做的一切，确实没有使用标签）
如果您想要/需要标签，请使用下面
定义的 Randy King 的解决方案图像src

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

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 src is 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:

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

回复收藏 0 原文

守望孤独 2024-11-14 06:33:34

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

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

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

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

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

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

回复收藏 0 原文

小鸟爱天空丶 2024-11-14 06:33:34

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

回复收藏 0 原文

囍孤女 2024-11-14 06:33:34

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

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

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:

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

回复收藏 0 原文

逆光飞翔i 2024-11-14 06:33:34

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

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

把这个：

进入此：

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:

.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:

回复收藏 0 原文

疯狂的代价 2024-11-14 06:33:34

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

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:

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>

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

回复收藏 0 原文

感悟人生的甜 2024-11-14 06:33:34

在您的 img src 标记中，添加 border="0"，例如，按照上面 @Amareswar 的解释

回复收藏 0 原文

各自安好 2024-11-14 06:33:34

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

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

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

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

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

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

回复收藏 0 原文

瀟灑尐姊 2024-11-14 06:33:34

内联CSS

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

inline css

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

回复收藏 0 原文

梦亿 2024-11-14 06:33:34

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

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

You can remove the border by setting text-indent to a very big number, but the alt of the image also be gone.
Try this

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

回复收藏 0 原文

箹锭⒈辈孓 2024-11-14 06:33:34

在 div 标签中显示 .png 图像时，我遇到了类似的问题。在图像的一侧渲染了一条细黑线（我认为是 1 像素）。为了解决这个问题，我必须添加以下 CSS 样式： box-shadow: none;

回复收藏 0 原文

白色秋天 2024-11-14 06:33:34

与 @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;
}

same as what @aaron-coding and @randy-king had - but just a more generic one to hide image border before they are loaded (i.e. with lazy-load.js or something

(apparently I can't do a code block in my original comment)

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

回复收藏 0 原文

墨洒年华 2024-11-14 06:33:34

我使用填充样式修复它：

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

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

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

I fix it using padding style:

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

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

The border is disappearing, while you are increasing padding value. Find your own value.

回复收藏 0 原文

空‖城人不在 2024-11-14 06:33:34

它对我有用。花了好几天的时间，这让我发疯。

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

it worked for me. It took days which made me crazy.

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

回复收藏 0 原文

山色无中 2024-11-14 06:33:34

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

回复收藏 0 原文

蓝眼泪 2024-11-14 06:33:34

首先用 Photoshop 创建一个迷你尺寸的 PNG 透明图像。
然后在你的班级中添加：

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

First create an image type PNG transparent with photoshop in mini size.
Then in your class please add:

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

回复收藏 0 原文

负佳期 2024-11-14 06:33:34

发生这种情况是因为您使用的 img 标签没有 src 属性。解决方案是将图像放入 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>

That happens because you are using an img tag with no src attribute. The solution is puting the image into a div. Something like that:

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

回复收藏 0 原文

~没有更多了~

关于作者

没︽人懂的悲伤

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

删除 Chrome/IE9 中的图像边框

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（18）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

删除 Chrome/IE9 中的图像边框

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（18）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。