2012-02-05 9 views
0

1pxの下枠を複製する背景画像を持つ最初の列を除く、すべてのセルが1pxの上枠を持つ表を持っています左に出す)。すべてのブラウザ(Chrome、Safari、IE6 +)では、「偽の境界線」が「実際の境界線」と並んでいます。ただし、偽の境界線が1px以下のFirefoxでは例外です。手動で画像を1ピクセル上に移動すると、完全に消えます。Firefoxで枠線画像とCSS画像が並んでいない

私はFirefoxが余分な1pxボーダーを別々に扱うと思っています。ボーダーのないセルの隣にボーダーがあるセルがある場合、Firefoxはボーダーがあるはずのスペースを残しているように見えますが、他のブラウザーはボーダーレスのセルを1pxだけ拡張するので、画像がそのスペースを占めることがあります。 (私は意味をなさないことを願っています)

誰でもこれについての修正を知っていますか?

の作業例:http://resonantmind.net/temp/compare.php

+0

コードまたは例が参考になります。 – j08691

+0

コードとスクリーンショットが追加されました。 – zenkaty

+0

実際のページにリンクできますか?サンプルコードは同じ動作をしていないようです。 – j08691

答えて

0

1.私も-1pxを試してみましたが、私は50pxに高さを設定します。正確にはあなたが望むものではありませんが、正しい道にあるようです。

.compare .item { 
    background:#fcfcfc url(bg-compare-item.gif) no-repeat 0 -1px; 
    height:50px; 

    /* original */ 
    text-align:left; line-height:29px !important; border:0; 
} 

別の解決策は、1ピクセル下の画像の一番上の行をシフトし、完全にボトムラインを除去することです。そして、CSSに-1pxを入れれば、望ましい結果が得られます。 Chome、IE9、Firefoxでよく見えます。

+0

あなたのソリューションをすべてのブラウザで動作させることができなかったので、Firefox固有のルールと同様のものを使用しました私はあなたがページをロードするブラウザに応じて、ボディにクラスを追加するJSを使用しています)。ありがとう! – zenkaty

+0

申し訳ありませんが、全体的な解決策を見つけることができませんでした。私が助けてくれると嬉しいです。 Btw、同じ問題に遭遇した場合、他の人が使用できるように、ソリューションを投稿する必要があります。 – JSuar

+0

私の解決策は、FirefoxとIEの画像を変更して、その行が画像の一番上ではなく画像の下に来るようにすることでした。ちょっとハッキリですが、うまくいきました。 – zenkaty

関連する問題