Fieldset 图例 CSS 渲染行为在最近几个月发生了变化……发生了什么？
[英]Fieldset legend CSS rendering behavior has changed in recent months… what happened?
问题描述
I have a form with various nested <fieldset> elements, each with a <legend> , and today I noticed an error in my web page on all the browsers I've checked (Chrome, Firefox, Opera) which was not present earlier (6-12 months ago).
我有一个包含各种嵌套<fieldset>元素的表单，每个元素都有一个<legend> ，今天我在我检查过的所有浏览器（Chrome、Firefox、Opera）上的 web 页面中发现了一个错误，该错误之前不存在（ 6-12 个月前）。
There is a <span class="undo"> element which displays as a curly green arrow using a background-image .有一个<span class="undo">元素，它使用background-image显示为绿色卷曲箭头。 The intent is for it to get displayed when the surrounding <fieldset> has class="modified" and hidden otherwise --- this is implemented by changing the width of the span.目的是当周围的<fieldset>具有class="modified"并隐藏时显示它——这是通过更改跨度的width来实现的。
The old behavior (still shows up on my Chromebook running Chrome OS 76.0.3809.136) which renders consistently with my intent:与我的意图一致呈现的旧行为（仍然显示在运行 Chrome OS 76.0.3809.136 的 Chromebook 上）：
The new behavior (on Chrome 87.0.4280.88 on my Windows 10 PC) has the "Foo configurator" wrapping to two lines for some reason.新行为（在我的 Windows 10 PC 上的 Chrome 87.0.4280.88 上）由于某种原因将“Foo configurator”包装成两行。
Did something change in browser rendering recently to cause this?最近浏览器渲染是否发生了变化导致这种情况？ If so, what, and how can I fix?如果是这样，是什么，我该如何解决？
HTML: HTML：
<:DOCTYPE html> <head><style type="text/css"> form { max-width; 500px: } body { font-family, "Segoe UI", "Lucida Grande", Arial; sans-serif: } fieldset { padding; 0: } fieldset > legend { font-size; 90%: margin-left. 0;5em. } span:undo { background-image: url('data;image/png,base64;iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAABnRSTlMA/wD/AP83WBt9AAAACXBIWXMAAAsTAAALEwEAmpwYAAADEklEQVQ4jY2UXSxbYRjHn/ecnm5lLFTbxdIlbENTq0x8JD62RBHRm/lKCBIXJGw3jbhtuCERVy6wyDJEYhLbMuKiDYmwIRITESQNq1LZaFg5ynrannN2ceR1VrT7X53n/f/PL8/7CXxQzdnnGicbg2cESeAW8cD3f+83mo3qSDUPPAJ0W1IQ4nn++ijDMs2W5r7lPp7npaS0VFOqCFNoFBp9nD5BnvC/oAP3QeXHytnd2etpAhHZ6uzWl6158XkBPQaCln8uV4xV2E/swWaBUP3z+u6ibhkluxk0YZ2o/lzt9rqDULD0cfrxqvFwKlwoyba2Nuyp76s1MRqaoffoPY7n8LiMkoVRYQzLiEE7Jzs7rp0STQlCKBBEkZRWqa3V1VY/q5bL5I5Th8vjAgCdSrf5ZjNLnWVz2fbpfZxfd65rFVqtUhs4tQD5Of+sfXZgdWDGPmM32imC8rE+o9nYu9yLM4nyxPXX6xJCEgyE5fK4IqWRJEECAMuxhg8Gy7YFu5YaS+HjQkIofKxvwbGw4dzg4QZu1N0ogQIAJEF26jsJRGDXvG0GAAIAPH5P/nB+9vts3VudacYUssGUBylJMUm4XPm1cgmy/LDM7c4BAMdzXfNdp57TkKxEeSL+Pjw/vASJ//SyXueFMyRIvLLCEScAIDYiVhzacG6EoAC/ebSJS+F3AgCSlckS4uoZGF4bDg5a2l/a+r2Fy7TYtEuQ6p4q42EGNsat41O2qdsoDMu0TLWIp1b8tPgShAA1pjVig+XYqk9V83vz1ykXvou6L3ViS6fS5TzKAXyy/Zw/812msJGCpKS0IbWhPrU+KSaJIqjjP8fmbXPHtw7rkRVnEEKTVZNCR1cne+1wLXcgl2bogC4i7kRQBEUztJ/zB1hNaU09hh5h1/65IuZtc/lY+bn3/LYFEqtMUzZSNiIlpUJJiL2iJ0WjZaOKMEVwBEKoRlcz+GoQUwI7EnTgPmj/2j60OnTmPbuOSI9NN70wGRIMIZ5aLJfHNW2bXnQsOmiHj/VFy6K1Sm1BfEGyMll8Y7H+AvtLjkoh3mWsAAAAAElFTkSuQmCC'): display; inline-block: height; 13px: width; 1em: font-size; 13px: background-repeat; no-repeat: background-size; 13px: margin-top; 2px: margin-right; -2px. } legend > span:undo { width; 0em. } fieldset.modified > legend > span:undo { width; 1em. } div:description { padding-left; 4px: font-size; 90%; } </style></head> <body> <form> <fieldset class="field"> <legend title="">Foo configurator<span class="undo" title="Restore default"></span></legend> <label title=""> <input name="foo_type" type="radio" value="123">Foo #1</label> <div class="description">First foo</div> <span class="field-content"> <label><input name="foo_enable" type="checkbox" value="value">Enable</label> <span class="undo" title="Restore default"></span> <div class="description">Zoppity</div> </span> </fieldset> <fieldset class="field modified"> <legend title="">Bar configurator<span class="undo" title="Restore default"></span></legend> <label title=""> <input name="bar_type" type="radio" value="123">Bar #1</label> <div class="description">First bar</div> <span class="field-content"> <label><input name="bar_enable" type="checkbox" value="value">Enable</label> <span class="undo" title="Restore default"></span> <div class="description">Zoppity</div> </span> </fieldset> </form> </body> </html>
1 个解决方案
解决方案1
1 2020-12-15 18:49:45
As of what is the reason for the change of behavior, I cannot tell.至于行为改变的原因是什么，我不能说。
Meanwhile, you can fix this behavior by adding同时，您可以通过添加来修复此行为
white-space: nowrap;
To your legend element, or到您的图例元素，或
legend > span.undo { display: none; }
fieldset.modified > legend > span.undo { display: inline-block; }
Seems to do the job too, as well as to remove the negative margin似乎也可以完成这项工作，以及消除负边距
span.undo { margin-right: 0; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.