html - 带有样式 img 的 ALT 文本中的 Mac 上的问号和边框

Question

我正在尝试为图片中的替代文本设置一个框的样式。如果图片不存在，我希望替代文本出现在一个框中，其中的文本看起来像图片。它可以在 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;
}

有谁知道为什么 it box 在 Mac 上看起来不一样？

Answer 1

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

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

<object data='$filename' width=300><span class=alt>$alttext</span></object>