IE 11定位问题与Firefox [英] IE 11 positioning issue versus 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;>过去的作品：< / div> 
< div style =position：relative; top：209px; left：30px;>主要工作区：< / div> 
< div style =position：relative; top：225px; left：30px;>里程愿意上班：< / div> 
< / div> 
  

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

---

这里有截图来看看变化...

第一个FF：

第二个IE：

解决方案

我可以告诉你为什么你没有得到你想要的结果，但现在的问题，我不能告诉你如何得到你想要的结果 。
$ b $ position：relative 结合 left 和 top 表示您在浏览器的默认布局中将元素从 的位置偏移。所以，你仍然完全受到浏览器相对于其他元素的相对位置的影响，你只需要根据位置将它们移动一下。

如果你希望标签以某种方式与右侧的输入对齐，您需要将它们都放在某个容器中（例如 div ），如果需要的话调整它们在那个容器里。 （要做到这一点，你可能必须使容器位置：相对没有任何左或 top ，所以它是它的子级的父级偏移量。）通过将两者都放在同一个容器中，确保它们在类似的基本位置（容器）中工作。

b $ b

I have been the following code that is not properly positioning itself when reviewed on Firefox against 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>

I have tried a handful of adjustments, but nothing is lining it up right. From what I can tell with IE 11 we should be able to avoid having to detect that internet explorer is in use. If so, how can I get these elements to be consistently laid out across the browsers?

---

Here are screenshots to see the variation...

First FF:

Second IE:

解决方案

I can tell you why you're not getting the results you want, but with the question as it is now, I can't tell you how to get the results you do want.

position: relative combined with left and top means that you're offsetting the element from where it would be in the browser's default layout. So you're still completely subject to how the browser lays the elements out relative to other elements, you're just moving them a bit based on that location.

If you want the labels to be aligned in some way with the inputs on the right, you need to put them both in some container (a div, for instance) and if necessary adjust them within that container. (To do that, you probably have to make the container position: relative without any left or top, so that it's the offset parent for its children.) By putting both within the same container, you ensure they're working from a similar basic position (the container).

这篇关于IE 11定位问题与Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！