css - img alt 更改图像尺寸

Question

出于某种原因，当我向网站上的某些图片添加 alt 标签时，它们的尺寸发生了变化。

替代标签

<table id="sidebar">
  <tr id="sidebar">
   <td><img src="images/photos/venetian_sample.gif" alt="venetian blind icon"></td>
   <td id="sidebar"><a href="blinds.html#venetian">Venetian Blinds</a></td>
  </tr>
</table>

没有替代标签

<table id="sidebar">
  <tr id="sidebar">
   <td><img src="images/photos/venetian_sample.gif"></td>
   <td id="sidebar"><a href="blinds.html#venetian">Venetian Blinds</a></td>
  </tr>
</table>

它们都使用相同的样式表，并且在该 div 中具有完全相同的 HTML。

有人知道为什么会这样吗？我知道图片没有加载。它们还没有被制造出来。但我想解决这个问题，以防它们将来无法加载，这样我的 body 就不会消失。

Answer 1

您遇到此“问题”的原因是您的图片尚不存在，因此无法找到。 alt标签旨在在无法找到图像时显示文本，而这正是正在发生的事情。当您确实开始上传图像时，它们将是它们应该的确切大小(如 CSS 或 HTML 中指定的那样)。简而言之，alt 标签不会影响图片的尺寸，除非浏览器无法显示/找到所述图片。

请参阅下面的链接。我编辑了您的 HTML 以包含浏览器可以找到的图片。如您所见，我的狗图像没有受到很长的影响 alt标签(这是一个完整的段落)。

http://jsfiddle.net/RWLFG/4/

此外，这里还有另一个示例，非常清楚地说明了我上面所解释的内容:

http://jsfiddle.net/P4X58/2/

(请注意，由于呈现错误，alt 文本不会在 Chrome 中显示。)

更新:好的，看来您指的是您在 <p> 之间输入的文本这一事实标签不可见。要解决此问题，请删除 float:left来自 #container在你的 CSS 中。请看下面的例子。 (顺便说一句，段落文本隐藏在您提供的两个链接中，不太确定为什么您认为 alt 标签与该问题有任何关系，但我离题了)。另外，您的代码中有很多错误，我强烈建议您使用官方 W3C validator 对其进行验证。 .

http://jsfiddle.net/RWLFG/7/