3

私のサイトには、自分の親div内に2つの画像があります（それぞれの完全な構造はですdiv a img）。divには流体の高さがあります（height: 10%;）。内の画像はに設定されていmax-height: 100%;ます。画像はWebkit内で適切なサイズになっていますが、他のすべてのブラウザでは一方または両方に問題があるようです。考えられる解決策を探してみましたが、原因すら想像できません。

皆さんに見せたほうがおそらく簡単なので、関連するページとファイルは次のとおりです。

  • メインページ（中央のロゴ画像と下部の「CRASH」ロゴ）
  • CSS（関連するdiv.logoはと.crash）

以下は私が見ているものの内訳です。助けてくれてありがとう！

編集：望ましくない結果が何であるかを実際に言及したことはありません。壊れているブラウザでは、画像は100％で表示されます。親コンテナの100％ではなく、画像自体のフルサイズで表示され、コンテナから外れます。これが物事を明らかにすることを願っています！

Browser / DIV | .logo | .crash
chrome 22     | works |  works (same results on my friend's copy of Safari)
opera 11.61   | broke |  broke
ie 9          | works |  broke
firefox 12    | works |  broke
4

3 に答える 3

3

Firebug を使用しfirefox 15.0て解決策を見つけました。うまくいけば、すべてのブラウザーで動作します。

1 . に定義された css ルールを削除し、以下のよう#footerにそれらのルールを追加します。.crash

.crash {
    height: 10%;
    position: absolute;
    text-align: center;
    top: 82%;
    width: 100%;
}

2 . 次のルールを追加します。

.footerNav {
    position: absolute;
    text-align: center;
    top: 92%;
    width: 100%;
}

3 . また、.mod-languages既存のスタイルを以下のように置き換えます。

.mod-languages {
    position: absolute;
    text-align: center;
    top: 96%;
    width: 100%;
}

その他の注意事項：

HTML 構造は次のようになります。

<div class="moduletable">
    <div class="custom">
        <div id="logo">
            <a href="http://www.millioncranes.com">
        </div>
    </div>
</div>

したがって、以下のようにラップmoduletableすると#footer:

<div id="footer">
    <div class="moduletable">
        <div class="custom">
            <div class="crash">
                <a title="CRASH Japan" href="http://crashjapan.com">
                    <img src="/images/crashlogo.png">
                </a>
            </div>
        </div>
    </div>
    .. /*Another moduletable*/
    .. /*Another moduletable*/
</div>

これは問題を引き起こします。#footer内のすべてのmoduletable要素に適用するスタイル#footer。したがって、これらの要素をフッター内にラップする必要はありません。のスタイルを設定したように要素をスタイルします#logo。それだけです!

うまくいけば、すべてのブラウザで問題が解決します。

于 2012-09-07T05:49:49.530 に答える
0

ここには Chromebook しかないので、Webkit 以外のブラウザーでテストすることはできませんが、私の推測は次のとおりです。

レンダリング エンジンが適用方法を認識するheight: 100%ためには、コンテナー要素の高さを確実に認識している必要があります。人々は長い間、100% の高さと格闘してきました。

まず、コンテナの高さが確実にわかるように、あなたのことを確認しますa。display: blockimg

次に、s コンテナー要素の明示的な高さを設定して遊んでimg、それらのいずれかがそれを修正するかどうかを確認します。問題が何であるかがわかれば、解決策を見つけることができます。うまくいけば。

乗り方を教えてください。

于 2012-09-07T05:47:22.463 に答える
-1

すべてのブラウザーが max-height をサポートしているわけではありません。http://caniuse.com/#search=max-heightを参照

結果のどの側面が気に入らないのか、実際には言いません。起こると予想することと実際に起こることの違いは正確には何ですか?

于 2012-09-07T05:21:11.387 に答える