绝对位置的图例在浏览器中的行为不同

Posted 2023-03-14

【中文标题】绝对位置的图例在浏览器中的行为不同

【英文标题】：Legend in absolute position behaves different in browsers

【发布时间】：2018-02-09 08:23:21

【问题描述】：

我在 Chrome 和 IE11 和 (Safari10 中的 fieldset 中定位 legend 时遇到了不同的行为问题 - 尽管我'不确定） 与 Firefox 和 Safari 11。

我希望看到 legend 在 Chrome 中的相同行为，但是当我添加绝对位置时，它并没有多大帮助。

fieldset,
label,
input 
	position: absolute;
	display: block;

<fieldset style="height: 150px; left: 5px; top: 45px; width: 460px;">
    <legend>Original Legend</legend>
    <label style="left: 5px; top: 0px;">Label:</label>
    <input class="readonly" style="left: 80px; top: 0px; width: 180px;" readonly="" tabindex="-1" type="text">
</fieldset>

预期行为类似于 Chrome、IE11、Safari 10。 （Legend 在定位 Fieldset 内的元素时不考虑在内）

Safari 11 和 Firefox 中的不良行为： （（Legend在Fieldset内部定位元素时会考虑到）

【问题讨论】：

预期的行为是什么？

我稍后会添加截图

所以你想要两个文本重叠......？

@CBroe 目标是在 Safari 11 中的 Fieldset 内定位元素时不考虑图例

所以您只是想通过绝对定位将每个元素固定到位？

【参考方案1】：

我在输入、标签和图例标签中添加了相对位置，并为输入和标签添加了内联块显示，因此它们在同一行：

input
   left: 80px;
   top: 0px;
   width: 180px;
   position: relative;
   display: inline-block;

label
   left: 5px;
   top: 0px;
   position: relative;
   display: inline-block;

这是一个 jsfiddle：

https://jsfiddle.net/yswjy9k3/2/

编辑：你也可以删除所有的定位，你会有完全相同的行为，这里是没有定位的jsfiddle：

https://jsfiddle.net/yswjy9k3/4/

【讨论】：

我只需要知道如何在Fieldset中定位元素时不考虑Legend。

你可以删除位置：relative;在传说中，它不会改变任何东西，我认为问题更多在于输入和标签中的绝对位置，它们的定位方式相同，这就是你有这种效果的原因（我改变了 jsfiddle）