jQuery .height() problem with chrome

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.