麻烦帮忙看一个很诡异的CSS高度设置的问题

我有一个html文件，把一个div元素高度设置为45px，如果把文件直接拖到浏览器，这个div是正常的45px。但是如果是通过服务器访问，即localhost:8080/webroot/myhtml.html这样的形式访问，则这个div是46px，并且只会在谷歌出现这个问题更奇葩的是，只有最后一个数字是5的时候才出现问题，例如我设置为44px，53px是正常的，但是如果设置为45px，55px，65px就出问题了，下面是我的完整代码

 <!DOCTYPE html>
<html>
    <head><meta charset="utf-8"></head>
    <body>
        <div class="top" style="background-color: pink;width: 1000px;height: 45px;"></div>
        <script type="text/javascript" src="./js/jquery-2.1.1.js"></script>
        <script type="text/javascript">
            alert("高度："+($(".top").css("height")));
        </script>
    </body>
</html>

问题已经解决，其实是line-height的问题。不同浏览器，有些属性是不一样的，这也是reset.css存在的必要，而这里的问题就是跟line-height有关。通过设置line-height即可解决问题

chrome版本 45.0.2421.0 (64-bit)表示没有问题。。
图片说明

div里加个float看看会不会好，还有就是，你写了两个html头？