0

Safari または Chrome ブラウザを使用して次の URL にアクセスします: http://aspspider.net/sunlight1000/two_col_div_layout_w3valid.htm 緑のボックスの高さが赤のボックスの高さより大きくなるように、ブラウザのウィンドウの幅を設定します。次に、ブラウザのウィンドウの下端をつかみ、緑色のボックスの下端にドラッグして、その周りで遊んでください。ブラウザのウィンドウの下端が緑のボックスの下端より高くなると、赤いボックスが消えます。次に、ブラウザのウィンドウの高さを縮小し続けると、赤いボックスが再び表示されます。ブラウザのウィンドウの下端が赤いボックスの下端に到達した瞬間に、赤いボックスが再び表示されることに気付くでしょう。他のブラウザー (IE、FF、Opera) では赤いボックスが消えることはありません。これは Safari のバグですか、それとも何らかの「機能」ですか? いずれにせよ、Safari で赤いボックスが消えないようにするための回避策を誰かが提案してくれれば、非常にありがたいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>2 Column Fixed Liquid CSS Layout</title>
    <style type='text/css'>
    .wrapper
    {
        width: 100%;
        min-width: 300px;
    }
    .wrapright
    {
        float: left;
        width: 100%;
        background-color: Blue;
    }
    .right
    {
        margin-left: 160px;
        background-color: Lime;
    }
    .left
    {
        float: left;
        width: 150px;
        margin-left: -100%;
    }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="wrapright">
        <div class="right">
            LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH
            EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT.
        </div>
    </div>
    <div class="left">
        <div style="background-color: red;">
            LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, ...
        </div>
    </div>
</div>
</body>
</html>
4

1 に答える 1

0

これが最終的なレイアウトで機能するかどうかはわかりませんが、デモ レイアウトに基づくと、マイナスの 100% マージンが問題を引き起こしているようです。float と margin の宣言を取り除き、.left div で position: absolute を実行しても、動作は同じように見えます。コンテナが相対的に配置されている限り、同じ最終結果が得られると思います。

于 2010-11-04T17:21:27.490 に答える