0

我正在尝试为图片中的替代文本设置一个框。如果图片不存在，我希望替代文本出现在一个带有看起来像图片的文本的框中。它可以在 PC 上运行，但在 Mac 上看起来不像我想要的那样。出现一个细灰色边框，中间放置一个问号。

图片： http: //postimg.org/image/tte1lw8sj/

这是我的图片 HTML

<a href='LINK.php?id=$id'><img src='$filename' class='headerimg' alt='$alttext' width='300'></a>

这是我的 CSS：

.headerimg {
color: #000;
font-size: 20px;
margin-bottom: 5px;
max-height: 120px;
border: none;
}

有谁知道为什么它的盒子在 Mac 上看起来不一样？

4

1 回答 1

3

在不显示图像的情况下，元素的呈现img非常依赖于浏览器，您不能期望它的样式保持一致。例如，一些浏览器只是简单地呈现alt文本，就好像元素刚刚被该文本替换（有些人认为这确实是最合适的方式）。

除非您需要支持相当旧的浏览器，否则请考虑使用object元素。它允许后备内容是普通的 HTML，您可以在其中放置一个元素并根据需要设置其样式：

<object data='$filename' width=300><span class=alt>$alttext</span></object>
于 2013-10-12T20:40:48.723 回答