jQuery .height() problem with chrome.

Question

I've been using jQuery Height function. But there was a problem in getting the correct height of my div element. This div element's height is set to auto, which means the div's height depends only on the elements inside of it. When I tried using the .height() in my page, I got the following result:

Chrome: 1276 px
Firefox: 1424 px

But when you see them both they have equal height. The only thing is that the height() function returns different result.

Here's the code:

<div class="single-mid" style="position:relative;width:700px;margin:-1px 0 0 1px;padding-right:56px;">
    <div>Sample Inside Element</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
     var less_height = $('.single-mid').height() -10;
     $('.single-mid').height(less_height);
});
</script>

But I tried to set the div's height into 1424px. Both browser return the same result.

Any ideas? Thanks in advance.

Answer 1

It seems to be caused by the different default font in the two browsers. If you add the following CSS to your example, the result will be the same for both Firefox and Chrome/Iron:

<style type="text/css">
  div {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
  }
</style>

You could probably use a CSS reset and define the styles yourself. This would give you more control on how to get it to look the same in most browsers.