Question

这是有问题的HTML和CSS：

＆＃13;

legend {
  float: left;
}

＆＃13;

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

＆＃13;

这将显示＆＃34;测试＆＃34;在FireFox，IE，Edge和Chrome 54中。在新版Chrome中，您根本看不到任何文字。

有没有办法在Chrome（第55版）中修复此问题？

Answer 1

这是Chrome中的错误

应将浮动图例添加到字段集的匿名块中。

如果fieldset的图例是浮动的，则应将其添加到现有图例中   fieldset的匿名块而不是创建嵌套块。这是   必要的，因为flexbox强制浮动图例   非浮动，因此如果图例需要浮动它   应该添加到fieldset的匿名块中。

BUG = 661230,670837

TEST =快/形式/字段集/字段集-图例-float.html

使用真实世界网站进行测试：


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://download-chromium.appspot.com/下载的最新原始版本中修复，并且似乎计划在未来几天内合并到版本55中：

Merge批准用于M55分支2883;我也会批准M56分公司2924，但是在明天我们确认一切看起来都不错之前我们不要处理。

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

与此同时，临时解决方案可能是将fieldset替换为包含legend div的{{1}}：

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>

更新12/12/16

出现此问题现已由Google更正，因为版本55.0.2883.87 m中不再出现该问题。

字段集中的浮动图例在最新版本的Chrome（第55版）中无法正确显示？

1 个答案: