IE 11定位问题与Firefox相比

Question

在针对IE 11的Firefox上进行评论时，我的以下代码无法正确定位：

<div style="position: absolute;">    
<div style="position: relative; top: 5px; left: 30px;">Union Affiliation:</div>
<div style="position: relative; top: 50px; left: 30px;">Biography:</div>
<div style="position: relative; top: 150px; left: 30px;">Past Works:</div>
<div style="position: relative; top: 209px; left: 30px;">Primary Work Area:</div>
<div style="position: relative; top: 225px; left: 30px;">Miles willing to travel for work:</div>
</div>

我尝试了一些调整，但没有任何正确的方法。从IE 11我可以告诉我们应该能够避免必须检测到正在使用的Internet Explorer。如果是这样，我怎样才能在浏览器中一致地布置这些元素？

---

以下是查看变体的截图...

第一次FF：

第二个IE：

Answer 1

我可以告诉你为什么你没有得到你想要的结果，但是问题就像现在一样，我不能告诉你如何得到你做的结果想要。

position: relative与left和top相结合意味着您在浏览器中将元素与 的元素相抵消默认布局。因此，您仍然完全依赖于浏览器如何将元素相对于其他元素放置，您只需根据该位置移动它们。

如果您希望标签与右侧的输入以某种方式对齐，则需要将它们放在某个容器中（例如div）并在必要时将它们调整为 那个容器。 （要做到这一点，您可能必须使容器position: relative没有任何left或top，以便它是其子项的偏移父项。）同一个容器，你确保他们从类似的基本位置（容器）工作。