是否可以将图像作为字段集的图例？

Question

我有这样的页面

<fieldset>
  <legend>Username</legend>
  <p>Information about the user</p>
</fieldset>

但我更倾向于在图例中使用用户的头像（如果是主要浏览器支持的话）。这是可能的还是我必须走div路线？

Answer 1

我已对此进行了测试，看起来您似乎可以使用图例中的图像。在这里查看一个工作示例 http://jsfiddle.net/qyWjM/

这是代码

<fieldset>
  <legend><img src="http://cdn.orkin.com/images/rodents/deer-mouse-illustration_360x244.jpg" height=50 width=50></legend>
</fieldset>

Answer 2

legend的内容模型是“内嵌”（在HTML 4.01）或“词组级别”（在HTML5 CR中），这允许文本和文本级标记，包括{ {1}}元素。因此，img内的img没有理由不起作用。虽然legend和fieldset的呈现具有一些特色，但它们不会影响图像的呈现方式。

与图像一样，存在图像可能无法始终呈现的问题，但这可以通过常规方式处理。如果您希望显示图像而不是用户名，您自然会将用户名设为legend文本：

alt

如果除了用户名之外还使用，<legend><img src=yucca.png alt=Yucca></legend> 文本应为空：

alt

另一方面，使用用户名或头像图像可能不是一个好主意。 <legend><img src=yucca.png alt=""> Yucca</legend> 应该是legend中数据的排序标题或标题，通常用户名和头像是数据（可能会提示输入），而不是数据的标题。因此，更正常的fieldset将是“用户名”（字面意思），然后实际的用户名将显示在其下方。