IE 11的定位问题与火狐

我一直在下面的代码，当在Firefox对IE 11审查不正确地定位自己：IE 11的定位问题与火狐

<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：

enter image description here

二IE：

enter image description here

来源

2014-05-02 Presto

*“我已经尝试了一些调整，但没有任何内容正确。”*** ***是什么方式错了？ *“如果是这样，我怎样才能让这些元素在浏览器中始终如一地布置？”*一致***如何***？它在IE11中如何不一致？ –

你能否确认你有一个有效的DOCTYPE指定？例如是你的第一行'<！doctype html>'或类似的东西？ – scunliffe

@TJCrowder'主要工作区域：'和'Miles愿意上班：'出现在FF下面大约30 px的位置，它们出现在FF – Presto

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

position: relative结合left和top意味着你抵消从那里将在浏览器的默认布局的元素。因此，您仍然完全服从浏览器相对于其他元素放置元素的方式，您只需根据该位置移动它们。

如果你想在标签以某种方式与右边的输入对齐，你需要把他们俩在某些容器（div，例如），如有必要该容器内进行调整。（要做到这一点，您可能必须制作容器position: relative而没有任何left或top，以便它是子项的抵消父项。）通过将两者都放在同一个容器中，确保它们在类似的基本位置上工作（容器）。

来源

2014-05-02 20:57:51

最后一段的附录：我最后的一个常见做法是有一个或多个容器'div's设置'position：relative'没有top/left属性 - 然后是具有'position：absolute'的子元素将根据该父母的位置定位自己。您可以为每个输入字段执行此操作。 – Katana314

@ Katana314：好点，我应该把它说出来。（现在我有。） –

谢谢，修复它对我来说。 – Presto

IE 11的定位问题与火狐

回答

相关问题