7

I'm trying to get the width of an element using element.outerWidth. When I'm using Chrome it returns a correct value, but when I'm switching to firefox I got a much lower value. In what way does firefox read this element different from chrome?

Element:

<div class="submit_container">
     <input type="submit" value="Something" />
</div>

Chrome: 88px
Firefox: 36px

When I inspect the element using firefox it display the same with as in chrome. (88px)

hgerdin
  • 637
  • 2
  • 8
  • 24
  • see here http://stackoverflow.com/questions/15023088/wrong-width-calculation-using-outerwidth-in-google-chrome-onload – PSR May 30 '13 at 13:04
  • The css is loaded long before I'm using outerWidth but I'm adding the submit_container right before I'm checking outerWidth. – hgerdin May 30 '13 at 13:10
  • I can not tell why but there is clearly some difference. Have a look at the Metrics tab after selecting the element. If you go to Layout in Firefox it shows something different but it should show the same thing. – Alex May 30 '13 at 14:00

1 Answers1

3

Have you tried using jQuery width?

$(element).width();

It has a slight difference but I guess it's a cross-browser issue.

EDIT:

I think the line-spacing was the one causing the difference in width. Try removing it in Firefox and you'll see the difference

Jude Duran
  • 2,195
  • 2
  • 25
  • 41