0

クロスブラウザでdivを取得できませんheight（少なくともChromeとFirefoxでは同じように見えるはずです）

これが私が言うことを意味するスクリーンショットです：

ここに画像の説明を入力してください

ご覧のとおり、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>

</ 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 に答える