web-dev-qa-db-ja.com

ボーダーコラプスによるFirefox 1ピクセルのバグ、回避策？

次の「左に1ピクセル」のバグの回避策はありますか？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
    <tbody>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
        <tr>
            <td>Hello</td>
            <td>World</td>
        </tr>
    </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>

次のようになります。

Firefox CSS bug

これに対する純粋なCSSソリューションはありますか？

編集する

私は自分のテーブルについて少し不明確だったので、ここにもう一度：

ボーダーコラプスあり：

Firefox CSS bug

Cellspacing = "0"を使用し、border-collapseを使用しない場合：

Firefox CSS bug

したがって、テーブル内の境界線はdoubledですが、テーブル全体に1pxの境界線が必要です。

テーブルから1pxのボーダーを削除すると、次のようになります：

Firefox CSS bug

テーブルの枠がまだ2倍になっています。

すべてのTD、TH、およびTRのすべての最初の子に左の境界のみを設定して、私が望むものを達成することができましたが、もっと簡単な方法があると思いますか？

cssfirefoxrenderingborder
36
Vexatus

Border-collapseを削除し、代わりにcellspacing = 0を使用します。

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

これは、border-collapse：collapseを設定すると、Firefox 2.0がボーダーをtrの外側に配置するために発生します。他のブラウザはそれを内側に置いています。

コードで境界線の幅を10pxに設定して、実際に何が起こっているかを確認します。

oP編集後に編集

古いテーブルの「ボーダー」トリックを使用できます。テーブルの背景色を設定します。 tdとthの色を白に設定します。ユーザーのセルスペース= 1;

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
18
Emily

マークアップの外に表示を保持することを好む人、またはマークアップにアクセスできない人のために、これは純粋にCSSソリューションです。自分でこの問題に遭遇し、FF3.5、IE6、IE7、IE8、Safari 4、Opera 10、およびGoogle Chromeでこのソリューションをテストしました。

table { border-spacing: 0; *border-collapse: collapse; }

これにより、すべてのブラウザー（原因、Firefoxを含む）で境界線間隔を使用するようにテーブルが設定されます。次に、CSSスターハックを使用してborder-collapseルールをIEのみに提示します。これは、border-spacingを適切に適用しません（IEの個別のスタイルシートを条件付きコメントとともに含めることもできます。ハッキングは好きではありません）。

セル間隔を使用したい場合は、必ずそれを使用してください。これは、CSSを使用した代替方法として提供されます。

22
Jon

この問題はなくなりました。 Firefox 47.0.1では、次のCSSでは1ピクセルの問題は発生しません。

table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px #000;
}

次のように、border-collapseの実装に依存することなく、きれいな1ピクセルの境界線を機能させることもできます。

table {
  border: solid 1px #000;
  border-width: 0 1px 1px 0;
  border-spacing: 0;
}

th, td {
  border: solid 1px #000;
  border-width: 1px 0 0 1px;
}

あなたはそれが何をしているのを見ますか？トリックは、セルの上と左の境界線のみを配置することです。

 +------+------
 | cell | cell
 +------+------
 | cell | cell

これにより、右端と下端のないテーブルが残ります。これらをtableにスタイルします

 + ------ + ------- | + ------- + ------ + 
 |セル|セル| |セル|セル| 
 + ------ + ------- + | = + ------- + ------ + 
 |セル|セル| |セル|セル| 
 | | --------- + + ------- + ------ +

border-spacing: 0は必須です。それ以外の場合、これらのラインは接続されません。

6
Kaz

CSSのみの最適なソリューション：

追加

td {
    background-clip: padding-box
}

詳細： https://developer.mozilla.org/en-US/docs/CSS/background-clip

@medoingthingsに感謝

3
helpse

テーブル{ボーダー間隔：0; border-collapse：折りたたみ。 }/* FF 3.5で動作します* /

2
chovy
table { border-spacing: 0; *border-collapse: collapse; }

fF 31で私のために機能していませんでした。広告とtbodyセルの色が異なるため、テーブルの背景色のトリックも機能しませんでした。唯一の解決策は次のとおりです。

table {
  border-collapse: separate;
}    
table tbody td {
  border: 1px solid #000;
  border-top: none;
  border-left: none;

  &:first-child {
    border-left: 1px solid #000;
  }
}
table thead th {
  border-bottom: 1px solid #ff0000;

  &:first-child {
    border-left: 1px solid #ff0000;
  }
  &:last-child {
    border-right: 1px solid #ff0000;
  }
}
2
Tobias Hartmann

今日はこれに噛まれました。提供された回避策は私にはうまくいかなかったので、自分で見つけました：

table { border: 1px solid transparent; border-collapse: collapse; }

このようにして、ブラウザ固有のルールなしで、折りたたまれた境界線、二重の境界線、および希望する境界内のすべてを取得します。欠点はありません。

1
rasenplanscher

私の解決策は次のとおりです。

  1. 削除する border-collapse、borderおよびborder-spacing CSSから。

  2. 次のJavaScriptコードを追加します。

    $('table tbody tr td').css('border-right', '1px solid #a25c17');
$('table tbody tr td').css('border-bottom', '1px solid #a25c17');
$('table tbody tr td:last-child').css('border-right', 'none');
$('table').css('border-bottom', '1px solid #a25c17');

正直なところ、なぜ機能するのかわかりません。それはjQueryの魔法です。

0
oEN

「左の1pxのバグ」について聞いたことがないと思います。コードをどこかにアップロードして、それをチェックして、「どこかで見逃した」バグではないことを確認してください:)また、 Firebugでマークアップを実行して、他に問題があるかどうかを判断します。

0
Sampson

この問題に遭遇し、回避策として。私が使用した：

table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}

基本的に、背景色を使用して境界線をだましました。これにより、内側の境界が二重になりません。

0
Shane

私はこの問題に遭遇しました-しかし私の場合は、overflow：hiddenに設定されたdiv内にテーブルがネストされていることが原因でした。私はこれを削除し、それはうまくいきました。

0
user251742