最新バージョンのChrome（バージョン55）では、フィールドセット内の浮動凡例が正しく表示されません。

Question

これが問題のHTMLとCSSです：これは、あなたがしませんクロームの新しいバージョンでFirefoxやIE、エッジ、とChrome 54で "テスト" と表示されます

legend { 
 
    float: left; 
 
}

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

まったくの言葉を参照してください。

Chrome（バージョン55）でこの問題を解決する方法はありますか？

Answer 1

これはクローム伝説はフィールドセットの匿名のブロックに追加する必要があります浮動

のバグです。

fieldsetの凡例が浮動している場合は、ネストされたフィールドを作成する代わりに、既存の フィールドセットの匿名ブロックに追加する必要があります。 flexboxは浮動凡例を で非浮動にするため、凡例を浮動させる必要がある場合は をフィールドセットの匿名ブロックに追加する必要があるため、これは が必要です。

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/

レビュー-URL：https://codereview.chromium.org/2550963002

クロム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にマージすることが予定されていることが表示されますされています：M55の枝2883のために承認された

マージ。私はM56ブランチ2924についても承認しますが、明日はすべてが良いように見えるまで処理しません。フィールドセットで

伝説フロートは（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>

更新12/12/16

が表示される問題は、Googleがバージョン55.0.2883.87 mで発生しなくなったため、修正されました。