CODEWITHSUNDEEP
htmldom
Pedder
Pedder

Reputation: 103

Chrome's offsetWidth inconsistent with FF/IE

I Recently took over a project were the navigation menus were not displaying correctly. I narrowed the problem down to how chrome is calculating the offsetWidth for a parent <a> containing a 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 the outer tag to display:block.

This fiddle demonstrates the issue.

http://jsfiddle.net/2ZwNM/

What I want to know is why this is happening? Is this due to the fact of placing a <p> inside an <a>?

Upvotes: 4

Views: 723

Answers (1)

mishik
mishik

Reputation: 10003

I think you can find all the required information here.

Just to quote relevant parts:

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

So for example, if you add some inline contents within your wrapper (e.g. this jsfiddle) then width of that wrapper will be the width of those inline contents.

Upvotes: 1

Related Questions