Chrome offsetWidth incompatible with FF / IE

Question

I recently took over the project, since the navigation menus did not display correctly. I narrowed down the problem before chrome calculates offsetWidth for the parent <a> containing the child <p> . All other browsers would take the child into account when calculating the offsetWidth for the parent, but chrome would give a width of 0. My solution was to set an external display:block tag.

This fiddle demonstrates the problem.

http://jsfiddle.net/2ZwNM/

What I want to know why this is happening? Is this due to the fact that a <p> placed inside a <a> ?

Answer 1

I think you can find all the necessary information here .

Just quote the relevant parts:

When an inline box contains a block level block in a stream, an inline block (and its inline ancestors in the same row field) splits around a block level block (and all block level bracelets that are sequential or separated only by resettable spaces and / or elements outside flow), breaking the built-in block into two fields (even if both sides are empty), one on each side of the block (s) of the level block. The row boxes before and after the break are enclosed in anonymous block blocks, and the block level block becomes the native of these anonymous boxes. When such an inline field affects relative positioning, any resulting translation also affects the block level contained in the inline field.

So, for example, if you add inline content to your wrapper (for example, this is jsfiddle ), then the width of this wrapper will be the width for the inline content.