在 Chrome/IE9 中删除图像边框 [英] Removing the image border in Chrome/IE9

问题描述

我正试图摆脱 Chrome 中每个图像出现的细边框 &IE9.我有这个 CSS:

大纲:无；边界:无；

使用 jQuery，我还在每个图像标签上添加了一个 border=0 属性.但是仍然出现如图所示的边框.有什么解决办法吗?

body {字体:10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;}img, 一个 img {大纲:无；边界:无；}.图标 {宽度:16px；高度:16px；文本缩进:-99999px；溢出:隐藏；背景重复:不重复；背景位置:-48px -144px;背景图片:网址(主题/图片/ui-icons_0078ae_256x240.png)；右边距:2px；显示:内联块；位置:相对；顶部:3px；}

<h1>Dashboard <img class="icon" border="0"></h1>

见附件截图:

解决方案

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

border-style: none;

你也可以像这样把它放在图片标签中:

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

• 使用
  而不是 元素(无论如何，你要做的就是有效地创建一个带有背景图像的元素， 标签确实没有被使用)
• 如果您想要/需要 标签，请使用下面 Randy King 的解决方案
• 定义图像src

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:

解决方案

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

这篇关于在 Chrome/IE9 中删除图像边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！