HTML仅在Firefox上呈现不同

Question

I've found something which seems to be wrong as HTML rendering, from Firefox only (actually Firefox version 27).

Chrome, Safari, Opera, Internet Explorer and even IE8* render this html correctly : http://jsfiddle.net/Totjoss/eMB69/4/

* even if IE8 is wrong elsewhere.

As written in this sample, the TEST and TEST2 must be anchored to the blue area, just like this Chrome example rendering : And Firefox does not place the TEST and TEST2 according to it correclty :

Plus those TEST and TEST2 must be hidden by the green area - as the blue one has overflow:hidden in its style.

It seems Firefox is doing it wrong when the parents are tabled displayed ( display:table and display:table-cell ). See the JSFiddle to see the HTML structure.

So is it a bug that should be reported ?

Though there is a solution to this : Just surround the blue area content with another div which is position:relative and it's fixed, but it's quite annoying and useless.

PS : Edited title.

Answer 1

I found this interesting to pick at, but also odd!

Perhaps not knowing the full reason to what you are trying to do. But making divs render like tables and then trying to make them render like divs again ( position relative et all ) , is just asking for cross browser/device trouble.

I gave up searching for a CSS 'throw in ' to solve the problem ( there might be one ) - even if there was, does it not feel 'wrong' to you /

Hard to give an answer here, and I think you have started to answer it too, so my answer would be.

Separate Layout elements from content elements.

Whatever we are trying to do - trying to format content/text ( the vertical align benefits you are getting from table-cell perhaps ) should be done with wrappers inside your layout elements- just to be solid and safe.

Sorry hope helps! Maybe the css 'fix', will get posted

Answer 2

TL;DR : change div#right to be position:absolute;height:100% and it will look like your non-firefox example.

---

In firefox's rendering of your example, div#test and div#test2 are way off to the left because their parent, div#right is styled as both display:table-cell and position:relative . The problem is,

The effect of position:relative on table-* elements is undefined.
— MDN

So basically, webkit have chosen to do one thing and Gecko another. Neither is wrong according to the spec, because the spec does not define the right answer.

However, if you change to position:absolute the children will position themselves as you expect.

More generally, I'd advise using flexbox if you are able to . It's much better suited to what I think you're trying to do.