在Firefox中删除黑色边框的图像alt文本？

Question

当我在firefox中打开我的网站时，它会在黑匣子中显示img alt属性（参见附图）。 它只显示一秒钟，当图像开始加载它消失。

我想删除它。

这是我的HTML代码

<a href="url"><img alt="alt text" width="650" height="241" src="src url" /></a>

它只在firefox中显示。

我尝试过使用此css代码

a img {
    border: 0;
}

但这没有帮助。

我怎么能删除它？

Answer 1

简短的回答是，你不能。更长的答案是你不应该。

你正以完全错误的方式接近这一点。我希望 - 在这个时代，没有多少人会想到为什么像ALT这样的标记属性存在，以及为什么Firefox在呈现图像之前会对边框产生困扰。但是如果你想认真对待网页设计，你应该知道这些事情。他们是有原因的。这是因为人们是不同的，用户代理是不同的 - 有些人甚至看不到很好的图像，而他们要么可以通过屏幕阅读器阅读或读取页面内容，而无法识别像素内容一切都很好。此外，在某些情况下（学术，科学），用户代理配置为忽略图像，仅显示ALT内容，而是专注于文本内容。

如果考虑到上述因素，您可以根据这些事实做出决定 - 您的形象实际上做了什么？您的用户是否很重要？如果它确实是一张照片的核心，那么你就不应该费心去向用户展示它了 - 放心吧，他们会看到它并希望能够幸福。

IMG元素用于基于图像的数据，该数据是您所投放文档的内容的一部分，而不是其样式的一部分。这是绝对必要的知识，许多人从未想过。分隔符，A元素之前的超链接图标，页面顶部的巨大横幅，表单按钮 - 所有这些都是不内容的一部分，它很少带给读者意义。仅这一点决定是否应该将这些放在那里，而不是CSS。您可以将IMG元素用于照片，绘图，徽标，插图等。

换句话说，如果它是您网页设计的装饰部分，您应该考虑背景图像是否会这样做 - 它也会完全消除您的边框和ALT问题。 这就是你能做的一切 - 没有CSS会因为你不喜欢边框而抢夺你的可访问性页面的用户。请注意 - 您的网页不是您的网页，您的用户会看到它们。用户代理也一样 - 他们使用他们的，他们更愿意按照他们的方式进行设置。你自己是否喜欢边界对他们来说没什么价值或关注。让他们有可能充分利用它们。平面设计是间接的妥协 - 我们希望使用我们可用的方法更好地传达我们选择的信息，同时尊重他们的选择和偏好。网页设计很大程度上是因为它在刀刃上行走。

<div style="background-image: url(forest.jpg); width: 600px; height: 200px;">
    Tree hugging, anyone?
</div>

Answer 2

我知道这是一个老问题，但这里是使用伪元素的CSS更新解决方案。

＆＃13;

＆＃13;

img:after {  
  content: attr(alt);
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

＆＃13;

 <img src="//placehold.foo/200x200" alt="Remove border from this alt text" />

＆＃13;

＆＃13;

＆＃13;