FireFox: TH как смещенный родитель для абсолютного позиционированного поля?

Question

У меня возникла проблема с положением: относительно th элементов в FireFox. В Chrome и IE элемент th является допустимым родителем смещения для элементов с абсолютным расположением.

<div class="relative"> 
    <p>fill some spacing</p> 
    <table> 
     <tr> 
      <th> 
       Hello? 
       <div id="absolute">Is it me you're looking for</div> 
      </th> 
     </tr> 
    </table> 
</div> 

.relative { 
    position:relative; 
    border:1px solid green; 
} 

th { 
    position:relative; 
    border:1px solid red; 
} 

#absolute { 
    position:absolute; 
    top: 0; 
    left: 100px; 
    width: 200px; 
    border: 1px solid blue; 
} 

http://jsfiddle.net/ntQqL/2/

В FireFox #absolute элемент расположен на самом верху .relative, в Chrome и IE он расположен в верхней части th, как я ожидал.

Является ли это известной разницей, или я делаю что-то неправильно?

Answer 1

Это, вероятно, связано с тем, как display и position свойства обрабатываются ...

Если поставить display:block на вашем th, it will work.

Christiaan answer also works.

Но я думаю, что лучший способ исправить эту проблему будет put a relative positionned div inside your th.

Answer 2

Это похоже на работу, когда вы положили позицию: относительная на table вместо th. Может быть, это может быть использовано в качестве обходного пути в вашей ситуации?