0

ここで、単一の画像を使用して丸みを帯びた角を使用する例を見つけました。私はこれをIE7+とFireFoxで完全に機能させています。

以下は、タブレイアウトの例です。

<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test 1</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test - 2</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test - 3</p></div>
</div>

以下は私のCSSスタイルです。

.corner
{
        background:url(../Images/LightCorner.gif);
        position:absolute;
        width:13px;
        height:13px;
        overflow:hidden;    
}

.inner
{
        position:relative;
        padding:13px;
        margin:0px;
}

.inner p
{
        padding:0px;
}

.tab
{
        color:#FFF;
        float:left;
        font-weight:bold;
        margin-right:5px;
        position:relative;
        text-align:center;
}

.tab p
{
        margin:0px;
        padding:0px;
}

.tab
{
        background:#B5B5B5;
}


.TL
{
        top:0px;
        left:0px;
        background-position:0px 0px;
}
.TR
{
        top:0px;
        right:0px;
        background-position:-13px 0px;
}

.TL, .TR
{
        margin:0px;
        padding:0px;
        position:absolute;
}

問題は、divの幅が偶数の場合、右上のdivが実際にはright：1pxとして配置されているかのように、1pxの右側の境界線になってしまうことです。幅が奇数の場合、タブの右側の灰色が表示されず、divが期待どおりに表示されます。

私が使用している画像はここにあります。完全な例はここにあります。

右上のdivがright：0pxに正しく配置されていないのはなぜですか？タブ幅が偶数の場合、IE6で1pxのギャップが発生するのはなぜですか？

4

3 に答える 3

1

問題は、divの幅が偶数の場合、右上のdivが実際にはright：1pxとして配置されているかのように、1pxの右側の境界線になってしまうことです。幅が奇数の場合、タブの右側の灰色が表示されず、divが期待どおりに表示されます。

コードには何もありません。InternetExplorer6のバグです。右または下に絶対位置を設定すると、実際の位置は2pxに丸められ、幅/高さの合計が1pxの場合に1pxの「マージン」が得られます。偶数（または奇数）。残念ながら、それを修正するにはJavaScriptが必要です。

この例（私が書いたもの）を確認して、IE6ウィンドウのサイズをピクセルごとにゆっくりと変更できます。下と右のボックスの位置は、2ピクセルごとに1回だけ更新されることに気付くでしょう。別の男も彼のサイトでこのバグを見つけて文書化しました。

上下を配置するときの高さの計算を修正し、高さを自動のままにするための1つをすでに作成しました。このサイトでこのスクリプトを使用しています。あなたの原因では、このスクリプトを変更して、に基づいて左オフセットを計算することができます。available_width-(right+width)

于 2009-09-12T13:37:18.447 に答える
0

やってみました

本体{マージン：0; }

于 2009-08-25T16:01:07.293 に答える
0

試してみてください：

right:-1px;

IE6の場合

于 2009-08-25T16:06:41.447 に答える