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

Question

在将legend定位在fieldset中的Chrome和IE11和( Safari10 -尽管我不确定)与Firefox和E 110Safari 11E 211时，我遇到了问题。

我希望看到与Chrome一样的legend的行为，但是当我添加绝对位置时，这并没有多大帮助。

​

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;
}

这里有个小摆设：

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

编辑：您也可以删除所有的定位，您将有完全相同的行为，以下是不需要定位的操作：

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