我正在尝试为照片中的替代文字设置一个方框。如果图片不存在,我希望替代文本显示在一个文本框中,看起来像一张图片。它适用于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上的盒子看起来不同?
答案 0 :(得分:3)
在未显示图像的情况下呈现img
元素非常依赖于浏览器,您不能期望对其进行一致的设置。例如,某些浏览器只是呈现alt
文本,好像该元素刚被该文本替换(有些人认为这确实是最合适的方式)。
除非您需要支持相当旧的浏览器,否则请考虑使用object
元素。它允许后备内容为普通HTML,您可以在其中放置一个元素并根据需要设置样式:
<object data='$filename' width=300><span class=alt>$alttext</span></object>