Firefox ignores absolute positioning in table cells

问题

I am trying to absolutely position an element inside a table cell. The TD has position:relative and the element has position:absolute.

This works great in all browsers except in Firefox where it is positioned relative to an ancestor relative container.

You can see this reproduced in this fiddle: http://jsfiddle.net/ac5CR/1/

Does anyone know if I miss some CSS setting that can fix that in Firefox?

回答1:

the element is not a block element. add to the style display:block, you will get the needed behavior.

回答2:

A possible work around would be to wrap the position:absolute element with another position:relative div. It requires an extra div, which is lame, but will give you the right result.

Example: http://jsfiddle.net/pTJUk/

Note -- this still won't give a completely correct result, as the position:relative div will be relative to the text position in the td -- crazy, right? Giving the cell a vertical-align:top will make it orient to 0,0, but of course this could be at the cost of other formatting your design requires.