使用CSS的DIV跨浏览器解决方案

Question

我无法在跨浏览器中获取我的div height（至少Chrome和Firefox看起来应该相同）

以下是我的意思：

正如您所看到的，与chrome相比，firefox中存在高度差异。 我无法解决它的高度，我需要一个更好的解决方案来解决这个问题

CSS：

    .container {
            width: 500px;
            max-height: 730px;
            margin: 10px;
            border: 1px solid #fff;
            background-color: #ffffff;
            box-shadow: 0px 2px 7px #292929;
            -moz-box-shadow: 0px 2px 7px #292929;
            -webkit-box-shadow: 0px 2px 7px #292929;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
        }
   .mainbody,.header,.footer {
            padding: 5px;
        }
        .mainbody {
            margin-top: 0;
            min-height: 150px;
            max-height: 615px;
            overflow: auto;
        }
   .header {
            height: 40px;
            border-bottom: 1px solid #EEE;
            background-color: #ffffff;
            height: 40px;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
    .footer {
            height: 40px;
            background-color: whiteSmoke;
            border-top: 1px solid #DDD;
            -webkit-border-bottom-left-radius: 5px;
            -webkit-border-bottom-right-radius: 5px;
            -moz-border-radius-bottomleft: 5px;
            -moz-border-radius-bottomright: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

HTML：

<div class="container">
<div class="header">Header</div>
<div class="mainbody">
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
    <p>Body</p>
</div>
<div class="footer">Footer</div>

DEMO

Answer 1

如果我在firefox和chrome中测试你的demo，两者的高度是一样的。我认为您的某个浏览器具有不同的缩放级别。在两个浏览器中同时按 ctrl 和 0 键并再次比较。

Answer 2

顺便说一下，

已经接受了另一个答案。我为有相同问题的人发布了我的答案，但问题的另一个原因是

如果不是缩放问题，您可以使用 reset.css

有了它，你的 demo on jsfiddle 在所有浏览器中看起来都一样（chrome，firefox，opera和safari从左到右）