删除图像边框答案

【问题标题】：Removing image borders删除图像边框
【发布时间】：2013-06-17 20:16:50
【问题描述】：

我是不是要疯了。我正在尝试删除图像边框，但似乎无法使用它来移动它

HTML：

<img src="../_test.jpg" width="200" height="200" alt="Test">

CSS：

img {
    border: 0px;
    outline: none;
}

Live example

【问题讨论】：

您的示例中没有边框...
你的图片是否被<a>标签包裹着？
这似乎是特定于浏览器的。 Chrome 为不可加载的图像添加了边框。 FF（也许还有其他人）不显示边界。要进行更正，请确保您的图片 URL 有效。 jsFiddle
我要疯了吗。 是的……我相信是的。
@Rob，当您使用有效图像时，您会验证边框消失了吗？ jsFiddle

标签： html css

【解决方案1】：

There are javascript solutions to handle broken images.

You could also wrap it in a div and do some tricks（这需要在 alt 文本之前有一个空格才能显示，因为“边框”在 img 的填充区域内）。 但是，对于仅处理损坏的图像（修复图像路径）来说，这可能有点过分。

HTML

<div class="brokenImgBorderKill">
  <img src="../_test.jpg" width="200" height="200" alt=" Test">
</div>

CSS

img {
    border: 0px;
    outline: none;
}

.brokenImgBorderKill {
    display: inline-block;
    width: 198px;
    height: 198px;
    overflow: hidden;
}

.brokenImgBorderKill img {
    margin: -1px 0 0 -1px;
}

【讨论】：