在Firefox中的定位问题？ position：相对于display：table元素 [英] Positioning problems in Firefox? position:relative for a display:table element

问题描述

我的HTML ：

 < article id =oneclass =layer>< / article& 
< article id =twoclass =layer>< / article> 
< article id =threeclass =layer> 
< div class =left>< / div> 
< div class =right>< / div> 
< / article> 
  

我的CSS ：

  html，body {
 margin：0; padding：0; 
 height：100％; 
 width：100％; 
} 
 
 article.layer {
 position：relative; 
 display：table; 
 height：100％; 
 width：100％; 
} 
 
文章.left，art​​icle .right {
 position：absolute; 
 width：50％; 
 height：100％; 
 min-height：100％; 
 display：table; 
} 
 
 article .left {left：0; top：0; } 
 article .right {left：50％; top：0; } 
  

因此，每篇文章都设置为 display：table 和100％宽度和100％高度。 body和html也是100％宽和高。因此，每篇文章正好是当前浏览器窗口的大小。

请注意，每个 article.layer 设置为 position：relative 。

最新文章有两个 div 位于 absolute 所以一个位于左边，一个位于右边。

在所有浏览器中都可以正常工作，Firefox除外。在Firefox中，最后一篇文章的 div.left 和 div.right 显示在顶部，覆盖了第一篇文章...

以下是现场演示： http://jsbin.com/ubulot / edit＃preview
在Firefox中测试，您会看到问题。我在我的Mac上安装了FF 9.0.1。

任何想法我在这里做错了什么？

解决方案

如果在整个过程中将 display：table 更改为 display：block 效果很好，您可以在此处查看。是否有使用 display：table 的原因？

i'm experiencing the weirdest positioning problem that appears only in firefox.

My HTML:

<article id="one" class="layer"></article>
<article id="two" class="layer"></article>
<article id="three" class="layer">
   <div class="left"></div>
   <div class="right"></div>
</article>

My CSS:

html, body {
  margin: 0; padding: 0;
  height: 100%;
  width: 100%;
}

article.layer {
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
}

article .left, article .right {
  position:absolute;
  width: 50%;
  height: 100%;
  min-height:100%;
  display:table;
}

article .left { left: 0; top: 0; }
article .right { left: 50%; top: 0; }

So each article is set to display:table and 100% width and 100% height. The body and html is also 100% wide and high. Therefore each article is exactly the size of the current browserwindow.

Notice that each article.layer is set to position:relative.

The latest article has two divs in it positioned absolute so one is positioned to the left and one to the right.

This works fine in all browsers, except in Firefox. In Firefox the div.left and div.right of the last article are shown on top and overlay the first article …

Here is a live demo: http://jsbin.com/ubulot/edit#preview Test it in Firefox and you see the problem. I have FF 9.0.1 installed on my Mac.

Any idea what I'm doing wrong here?

解决方案

If you change display:table to display:block throughout, it renders fine as you can see here. Is there a reason you're using display:table?

这篇关于在Firefox中的定位问题？ position：相对于display：table元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！