CSS定位在表单元格中绝对不能在Firefox中工作 [英] CSS Positioning Absolute within table cells not working in Firefox

问题描述

我在Firefox中找不到这个定位问题。它似乎不遵循绝对定位规则。

$ b

JS Fiddle：有些事情我不应该做，

原创 - http://jsfiddle.net/g9qzh/

已更新 - http://jsfiddle.net/g9qzh/2/

适用于IE，Chrome，Safari和Opera

这是实际的程式码。如果我不遵循某些标准，我不知道。

HTML：

 < table> 
< tr> 
< td> 
< div id =three> Three< / div> 
< div id =two>两个< / div> 
< / td> 
< tr> 
< tr> 
< td> 
< div id =three> Three< / div> 
< div id =two>两个< / div> 
< / td> 
< tr> 
< / table> 
  

CSS：

  #two {
 position：absolute; 
 top：0; 
} 
 td {
 position：relative; 
} 
  

我唯一的线索是有一些其他值， td ，这将导致它工作。一些其他stackoverflow问题已经提到Firefox不正确的这一点，但我没有能够找到一个答案。我尝试分配的顶部和左边的值为零，但FF不会预兆。

解决方案

将ID更改为类并将其显示为块可修复：

http://jsfiddle.net/GchWZ/

这是更好和更适当的用户内部div虽然引用从这个堆栈溢出post： Firefox支持位置：相对于表格元素吗？

  td> 
< div style =position：relative> 
这将被正常定位
< div style =position：absolute; top：5px; left：5px;> 
这将定位在相对于单元格的5.5处
< / div> 
< / div> 
< / td> 
  

I cannot figure out this positioning problem in Firefox. It doesn't seem to follow the absolute positioning rule. Is there something I'm doing that shouldn't be done, but some browesers handle it and some don't?

JS Fiddle:

Original - http://jsfiddle.net/g9qzh/

Updated - http://jsfiddle.net/g9qzh/2/

Works in IE, Chrome, Safari, Opera

Here's the actual code. Let me know if I'm not following some kind of standard I don't know about.

HTML:

<table>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
</table>

CSS:

#two {
   position: absolute;
   top: 0;
}
td {
   position: relative;
}

​My only clue is that there is some other value that I should assign to td that would cause it to work. Some other stackoverflow questions have mentioned Firefox misbehaving with this, but I haven't been able to find an answer. I tried assigning both top and left values of zero, but FF won't budge. ​

解决方案

Change ID's to classes and also displaying it as blocks fixes it:

http://jsfiddle.net/GchWZ/

It is better and more "proper" to user an inner div though as quoted from this stack overflow post: Does Firefox support position: relative on table elements?

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>

这篇关于CSS定位在表单元格中绝对不能在Firefox中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！