0

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

这是我想说的截图：

在此处输入图像描述

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

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>

​</p>

演示

4

2 回答 2

2

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

于 2012-05-12T09:50:02.123 回答
1

顺便说一句，另一个答案已被接受。我为有同样问题的人发布我的答案，但问题的另一个原因

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

有了它，您在 jsfiddle 上的演示在所有浏览器中看起来都一样（从左到右，chrome、firefox、opera 和 safari） 在此处输入图像描述

于 2012-05-12T10:01:50.697 回答