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

时间:2013-10-12 18:41:41

标签: html css image macos alt

我正在尝试为照片中的替代文字设置一个方框。如果图片不存在,我希望替代文本显示在一个文本框中,看起来像一张图片。它适用于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上的盒子看起来不同?

1 个答案:

答案 0 :(得分:3)

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

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

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