html - 字段集中的 float 图例在最新版本的 Chrome(版本 55)中无法正确显示？

Question

这是有问题的 HTML 和 CSS:

legend {
  float: left;
}

<fieldset>
  <legend>Test</legend>
</fieldset>

这将在 FireFox、IE、Edge 和 Chrome 54 中显示“Test”。在新版本的 Chrome 中，您根本看不到任何字样。

有没有办法在 Chrome(55 版)中解决这个问题？

Answer 1

这是 Chrome 中的错误

Floating legend should be added to the fieldset's anonymous block.

If fieldset's legend is floating it should be added to the existing fieldset\'s anonymous block instead of creating a nested one. This is necessary because flexbox forces the floating legend to be non-floating and therefore if the legend needs to be floating it should be added to the fieldset's anonymous block.

BUG=661230, 670837

TEST=fast/forms/fieldset/fieldset-legend-float.html

Tested with real world websites:

• https://jsbin.com/zutekilusi/1/edit?html,css,output
• http://www.timico.co.uk/timico-ltd-application-form
• http://codepen.io/michaelpumo/pen/VmZqrr
• https://en.wikipedia.org/wiki/Special:ActiveUsers
• https://jsfiddle.net/tdbthtra/

Review-Url: https://codereview.chromium.org/2550963002

Chromium Git - https://chromium.googlesource.com/chromium/src.git/+/0f77a4ef8c0218492b5b8689a793b34b0f5a34d8

已提出以下错误报告:

• https://bugs.chromium.org/p/chromium/issues/detail?id=670837
• https://bugs.chromium.org/p/chromium/issues/detail?id=661230

我们能做什么？

该错误已在从 https://download-chromium.appspot.com/ 下载的最新原始版本中得到修复并且似乎计划在未来几天内合并到 55 版中:

Merge approved for M55 branch 2883; I will also approve for M56 branch 2924 but let's not process that until we have confirmation that everything looks good tomorrow.

字段集中的图例 float 使图例消失(评论 56)- https://bugs.chromium.org/p/chromium/issues/detail?id=670837#c56

与此同时，一个临时解决方案可能是用 div 替换包含 legend 的 fieldset:

legend {
  float: left;
}
div {
  border: 2px groove threedface;
  margin: 2px;
}

<fieldset>
  <legend>Label</legend>
  <p>Label doesn't show</p>
</fieldset>
<div>
  <legend>Label</legend>
  <p>does show</p>
</div>

16 年 12 月 12 日更新

该问题现在似乎已被 Google 纠正，因为它不再出现在版本 55.0.2883.87 m 中。