绝对位置的图例在浏览器中表现不同

Question

我在 Chrome 和 IE11 中的legend fieldset和{ Safari10 中定位legend时遇到了不同的问题> - 虽然我不确定） vs Firefox 和 Safari 11 。

我希望在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>

Legend

  

预期行为类似于Chrome，IE11，Safari 10。
 （Fieldset内的定位元素中考虑了{strong>

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