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

时间:2018-02-09 08:23:22

标签: html css cross-browser

我在 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> enter image description here

在Safari 11,Firefox中不受欢迎的行为:
({Legend)中的定位元素考虑了{Fieldset

enter image description here

1 个答案:

答案 0 :(得分:0)

我在输入,标签和图例标签中添加了相对位置,并在输入和标签上添加了内联块显示,因此它们位于同一行:

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/