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

Question

我在 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内部定位元素时会考虑到）

Answer 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/