0

当我在 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;
}

但这没有帮助。

我怎样才能删除这个？

4

2 回答 2

7

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

您正在以完全错误的方式处理此问题。预料之中，我猜 - 在这个时代，没有多少人关心为什么ALT存在这样的标签属性，以及为什么 Firefox 在渲染图像之前会打扰边框。但是如果你想认真对待网页设计，你应该知道这些事情。他们在那里是有原因的。这是因为人们不同，用户代理也不同——有些人甚至无法很好地看到图像，而他们可能会阅读或被屏幕阅读器读取到页面内容，而屏幕阅读器无法很好地识别像素内容。此外，在某些场景（学术、科学）中，用户代理被配置为忽略图像，仅显示 ALT 内容，而专注于文本内容。

如果您考虑到上述情况，您可以根据这些事实做出决定——您的图像实际上是做什么的？让您的用户看到它重要吗？如果它确实是它的核心图片，那么您不应该担心它将如何显示给您的用户 - 请放心，他们会看到它并希望感到高兴。

该IMG元素用于基于图像的数据，它是您所服务文档内容的一部分，而不是其样式的一部分。这是一个绝对必要的知识，许多人从未想过。分隔符、A元素前的超链接图标、页面顶部的巨大横幅、表单按钮——所有这些都不是内容的一部分，它很少对读者有意义。仅此一项就决定了是否应该将这些内容与 CSS 一起放入其中。您将IMG元素用于照片、绘图、徽标、插图等。

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

<div style="background-image: url(forest.jpg); width: 600px; height: 200px;">
    Tree hugging, anyone?
</div>
于 2012-09-18T12:17:22.843 回答
0

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

img:after {  
  content: attr(alt);
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
 <img src="//placehold.foo/200x200" alt="Remove border from this alt text" />

于 2017-07-09T21:49:43.780 回答