IE 11 与 Firefox 的定位问题答案

【问题标题】：IE 11 positioning issue versus FirefoxIE 11 与 Firefox 的定位问题
【发布时间】：2014-05-03 05:05:53
【问题描述】：

在针对 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：

【问题讨论】：

“我已经尝试了一些调整，但没有一个是正确的。” what way这是错的吗？ “如果是这样，我怎样才能让这些元素在浏览器中保持一致？” 一致地如何？ IE11怎么不一致？
您能确认您指定了有效的 DOCTYPE 吗？例如你的第一行是<!doctype html> 还是类似的？
@T.J.Crowder Primary Work Area: 和 Miles willing to travel for work: 显示在 FF 显示位置下方约 30 像素处
@scnliffe 源代码中显示的第一行是<!DOCTYPE html>
@T.J.Crowder 我添加了屏幕截图以帮助查看变化。

标签： internet-explorer firefox html css-position

【解决方案1】：

我可以告诉你为什么你没有得到你想要的结果，但是对于现在的问题，我不能告诉你如何得到你确实想要的结果。

position: relative 结合left 和top 意味着您将元素从浏览器默认布局中的位置偏移。因此，您仍然完全受制于浏览器相对于其他元素的布局方式，您只是根据该位置稍微移动它们。

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

【讨论】：

最后一段的附录：我的一个常见做法是有一个或多个容器 divs 设置 position: relative 没有顶部/左侧属性 - 然后，子元素position: absolute 将根据该父级的位置定位自己。您可以对每个输入字段执行此操作。
@Katana314：很好，我应该说出来。（现在我有了。）