1

もうすぐ 2010 年ですが、私はまだ IE6 のバグに取り組んでいます。ため息。

それで、ここに私がグーグル経由で答えを見つけるのに苦労している（私にとって）新しいものがあります。内側の影で DIV を作成しています。div は、幅と高さを柔軟にする必要があります。これを実現するために、DIV に内側の影の背景イメージを与えています。次に、他の 3 つのコーナー (右上、右下、左下) に 3 つの絶対位置の div を追加し、それらが重なるようにそれぞれの高さを指定します。

これは、(当然のことながら) IE6 を除くすべてのブラウザーでうまく機能します。IE6 では、絶対位置の div には高さがありません。zoom: 1 to trigger has layout を使用してみましたが、うまくいきませんでした。これに対する修正を知っている人はいますか？

<div class="rounded" style="
    width: 80%;
    max-width: 950px;
    margin: 10%;
    height: auto;
    background: url('images/bgnd-shadowbox-dark.gif');
    position: relative;
">

    <div class="rounded" style="
        width: 50%;
        height: 75%;
        position: absolute;
        top: 0px;
        right: 0px;
        background: yellow url('images/bgnd-shadowbox-dark.gif') top right;
        ">
    </div>
    <div class="rounded" style="
        width: 60%;
        height: 30%;
        position: absolute;
        bottom: 0px;
        right: 0px;
        background: orange url('images/bgnd-shadowbox-dark.gif') bottom right;
        ">
    </div>
    <div class="rounded" style="
        width: 50%;
        height: 25%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        background: red url('images/bgnd-shadowbox-dark.gif') bottom left;
        ">
    </div>


    <div style="
            position: relative;
            border: 3px solid green;
            margin: 3em;
            "> 

        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>

    </div>
</div>

更新：問題を明確にするために（コーナーの問題は赤いニシンだと思うので）：相対的に配置されたdiv内に絶対的に配置されたDIVを持ち、ネストされたDIVをIE6のパーセンテージ高さ属性に準拠させるにはどうすればよいですか？

更新 2: 詳細情報: コンテナー div に明示的な高さが指定されている場合、これは機能します。問題は、コンテナ div の高さを相対的に配置された div の高さに基づいて設定する場合です。IE6はそれを理解できないようです。

4

2 に答える 2

0

画像の構築に関して何かが足りないかもしれませんが、3つのコーナーに配置するだけではどうですか。

.corners .right-top {top: 0px; right: 0px;}
.corners .bottom-top {bottom: 0px; right: 0px;}
.corners .bottom-left {bottom: 0px; left: 0px;}
于 2009-12-28T16:54:17.970 に答える
-1

これは私にとってはうまくいきました。空のdiv内に がありました。CSSで私は以下を使用しました

*height:1px;
*padding:2px 0px;
*line-height:4px;

' * ' は、IE6 でのみ認識される div の高さが 4px であることを示しています。

于 2010-08-05T15:47:14.350 に答える