2011-02-07 10 views
0

私はコーナーを両サイドに追加しましたが、IE7ではコーナーが表示されません。IE7内のコーナーTH

私は「Insepctor」(すなわち、(F12))を使用し、ページから何らかの癖を取り除く(単にページを再びレンダリングする)と、突然表示されます。

WTF ??

<thead> 
    <tr> 
     <th class="process_table_top" colspan="2"> 
      <div class="corner-2 trp"></div> 
      <div class="corner-2 tlp"></div> 
     <strong>Personal Details</strong> 
     </th> 
     </tr> 
</thead> 

CSS:

.corner-2.tlp{ background:url(/images/buy_process/table-sprite.png);background-position: 0 -18px; width: 5px; height: 4px; top:5px;left:5px;position:absolute;} 
.corner-2.trp{ background:url(/images/buy_process/table-sprite.png);background-position: 0 -27px; width: 5px; height: 5px; top:5px;right:5px;position:absolute;} 
+0

背景の位置の値は、左上と右隅では奇妙に見えます。また、テーブル/コンテナにposition:relativeを設定することもできます。適用される。 – reisio

+0

私は、問題に対処するために多くの方法を試したためコードが醜いです、すべて同じポイントに戻ってきました - IE7は背景画像のレンダリングを拒否します。 – WEBProject

+0

http://www.jsbin.comまたはhttp://jsfiddle.net/でライブサンプルを作成して、スプライトと一緒に何が起こるかを理解することができますか? – Sotiris

答えて

1

position:absolute;を指定する場合は、親要素にposition:relative;を指定する必要があります。この場合、<th>要素になります。

あなたは親要素のposition:relative;を指定しない場合は、position:absolute;要素は、それが<body>要素まで、次の要素までposition:relative;を持つDOMツリーからのすべての方法を配置していますがかかります。

したがって、解決策は、<th>要素にposition:relative;を入れることです。

作成している「コーナー」が「丸みを帯びたコーナー」であるかどうかは指定していませんか?それがあなたがやろうとしていることであれば、丸みを帯びたコーナーにコーナーグラフィックを使用することのすべてを捨てないでください。これを行うもっと良い方法があります。

丸みを帯びたコーナーを行う標準的な方法は、CSS3スタイルborder-radiusを使用することです。これはIE以外のすべてのブラウザで標準として機能します。あなたはおそらくこれを知っていますが、明らかにIEで動作する必要があります。良いニュースは、border-radiusスタイルをIEのためにも機能させるために利用できるいくつかのハックがあることです。

お気に入りはCSS3Pieです。非常に使いやすく、HTMLコードの余分なマークアップやグラフィックを心配する必要はありません。

希望に役立ちます。

0

IE 7は、開発およびテスト時に、時には予期しない動作につながるいくつかの引用積極的なキャッシュを持っています。キャッシュを使用せずに強制的にリロードするにはCtrl + F5を使用するか、リロードする前にキャッシュをクリアする必要があります。

+0

私は、私はすべてのキャッシュ関連のファイル、履歴、クッキー、あなたが考えることができるものを削除し、さらに私のコンピュータを再起動し、キャッシュを削除しました。 また、別の仮想マシンでIE7でチェックしましたが、まだ何もありません。 – WEBProject

関連する問題