在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个回答

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

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

- Hoang Trung · Answer 1

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

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

- Farid Habita · Answer 2

解决方案是将轮廓样式设置为无（即outline:none），这对我有效。

- Zerato · Answer 3

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

- rwcorbett · Answer 4

和@aaron-coding以及@randy-king所说的一样 - 只是更通用的方法，在图片加载之前隐藏边框（即使用{{link1：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;
}

- vahid sabet · Answer 5

这对我有用。花了几天时间让我疯狂。

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

- Alexandr · Answer 6

我使用填充样式来修复它：

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

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

当您增加填充值时，边框会消失。找到适合自己的值。

- Amin Karimi · Answer 7

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

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

- Alejandro Liébana · Answer 8

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