バックグラウンド画像の位置は、IE6の最上部ではなく上部にとどまる

Question

流動性のある柔軟な曲線のコーナーボックスを作成したい。 理想的には汎用性の高いものでなければならないので、コンテンツはボックスの上部/下部に表示されます。

権利によって、4つの要素（div）と1つの画像を使用できるはずです。 私はこれをIE6を除いてほぼすべてのブラウザで動作させることができます。

コードを変更しましたhttp://www.schillmania.com/projects/dialog2/basic.html 次のマークアップとCSSがあります。

<div class="boxtl boxcontent"> 
    <div class="boxtr boxcontentside">tr</div> 
     <p>This is the top half of the box</p> 
     <p> content! </p> 
     <p> content! </p> 
</div> 
<div class="boxbl boxcontent2"> 
    <div class="boxbr boxcontentside">br</div> 
     <p>This is the bottom half of the box</p> 
     <p> content! </p> 
     <p> content! </p> 
</div> 


.boxtl, .boxtr, .boxbl, .boxbr {position:relative; zoom:1; background: url(../revised-images/testbox2.png) no-repeat 0 0; _background: url(../revised-images/testbox2ie.png) no-repeat 0 0; height:auto;} 
.boxtl {margin-right:20px; } 
.boxtr {margin-right:-20px; width:20px; height:20px; position:absolute; left:100%; top:0; background-position: 100% 0; } 
.boxbl {margin-right:20px; background-position: 0 100%;} 
.boxbr {margin-right:-20px; width:20px; position:absolute; left:100%; top:0; background-position: 100% 100%;} 
.boxcontent {padding:20px 0 1px 20px; position:relative; zoom:1; _overflow-y:hidden; width:auto;} 
.boxcontentside {height:100%; _height:2000px;} 

私は大きな単一のボックス画像（2000px H/W）を使用しました。 この方法の考え方は、私はアルファ透明度（コーナー、陰影等）、無重複等

とを使用することができることです。

問題はIE6です。それは背景画像の垂直方向の位置付けに似ていることを何もしません。私はトップ2のdiv（.tlと.tr）の背景位置を上から50％に変更しようとしましたが、IE6では0にとどまりました。

私はフル/ （バックグラウンドイメージ/バックグラウンドリピート/バックグラウンドポジション）、x/yバージョン（バックグラウンドポジション-x /バックグラウンドポジション-y）などを試しました。

_height ：または_overflow-y：IEが必要な高さに伸びるようにするには、画像を垂直方向に配置する能力が犠牲になります。

どうすればいいですか？

Answer 1

@Danのコメントで述べたように、丸みを帯びたコーナーには、この種のコーナーイメージ技術を使用しないでください。

これにはCSSプロパティborder-radiusを使用する必要があります。

IE6-8はborder-radiusをサポートしていませんが、CSS3Pieスクリプトを使用して、このプロパティのサポートをこれらの古いバージョンのIEに追加できます。

これで余分なマークアップや不要なすべてのクラス、あるいはそのすべてのCSSが不要になりました。

CSS3Pieの美しさは、IEでのみ実行されることです。他のすべてのブラウザでは、純粋なCSSを使用し、CSS3Pieスクリプトは無視します。 IEでは、それはjavascriptの解決策ですが、軽量（通常、コーナーの複数の画像ファイルをダウンロードするより軽量です）、実行されなければ、フォールバックは単純に四角です。正確には世界で最悪のことではありません。

また、他の多くの便利なCSS3機能のサポートをIEに追加しました。

CSS3Pieのダウンロード重量が多すぎる場合（33k）、同じことをするが機能は少ない他の同様のプロジェクトがいくつかあります。 CSS3Pieが登場する前は、代わりにHTMLRemixのものをお勧めしました。それは約5kですが、それほど良くありません。