web-dev-qa-db-ja.com

Chrome colspanとborderのバグ？

以下の例では、右側のセルの上に境界線があります。 Chromeでのみ表示されますが、Chromeバグですか？

HTML/CSS

html,
body {
  height: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.left {
  border-right: 1px #aaaaaa solid;
  border-top: 1px #aaaaaa solid;
}
<table>
  <tr>
    <td colspan=2>top</td>
  </tr>
  <tr>
    <td class="left">left</td>
    <td>right</td>
  </tr>
</table>

これが例です フィドルとして 。

Chromeのスクリーンショット

Example

htmlcssgoogle-chromechromium
20
no_gravity

これは同じバグのようです ここにリストされています （または同様の）

簡単な回避策は、この回答の下部にあります。

これはそのバグレポートに関連するコメントです：

これは、テーブルコードの既知の（古い）問題です。折りたたみ境界は隣接するセルに基づいて決定され、コードはスパンセルを正しく処理しません（行/列スパンの最初の行/列に隣接するセルのみを考慮します）。その上、境界の粒度はセルのスパンによって決定されます。

このバグを修正するには、崩壊するボーダーコードをオーバーホールする必要があります。これは大きな仕事です。

同じ問題を浮き彫りにする例を次に示します。

html,
body {
  height: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.left {
  border-right: 1px #aaaaaa solid;
  border-top: 1px #aaaaaa solid;
}
.right {
  border-top: double 20px #F00;
}
<table>
  <tr>
    <td colspan=2>top</td>
  </tr>
  <tr>
    <td class="left">left</td>
    <td class="right">right</td>
  </tr>
</table>

私はこれを追加しました：

.right { border-top: double 20px #F00; }

Chromeでこれが発生します：

Screeshot

それがバグでなければ、その灰色の境界線は二重の赤い境界線の間にありません。

比較のために、これはどのように見えるべきかです（Firefoxで取得）：

Screenshot 2

これが国境紛争のルールです ：

ルール1：国境紛争について話さない

次のルールは、競合が発生した場合にどの境界線スタイルが「勝つ」かを決定します。

  1. 'hidden'の 'border-style'の境界線は、他のすべての競合する境界線よりも優先されます。この値の境界線は、この場所のすべての境界線を抑制します。

  2. 'none'のスタイルの境界線は、優先度が最も低くなります。このエッジで出会うすべての要素の境界線プロパティが「none」の場合にのみ、境界線は省略されます（ただし、「none」が境界線スタイルのデフォルト値であることに注意してください）。

  3. どのスタイルも「非表示」でなく、少なくとも1つが「なし」でない場合、狭い境界線は破棄され、広い境界線が優先されます。複数のスタイルが同じ「border-width」の場合、「double」、「solid」、「dashed」、「dotted」、「ridge」、「outset」、「groove」、および最も低いスタイルが優先されます。 「はめ込み」。

  4. 境界線のスタイルの色のみが異なる場合は、セルに設定されたスタイルが行の1つに優先され、行グループ、列、列グループ、最後にテーブルに優先されます。同じタイプの2つの要素が競合する場合、さらに左側（テーブルの「方向」が「ltr」の場合、右側、「rtl」の場合）、さらに上部の要素が優先されます。

Workaround

回避策は次のとおりです。border-collapse: collapseは使用しないでください。

table {
  border-collapse: separate; /* the default option */
  border-spacing: 0; /* remove border gaps */
}
td {
  padding: 20px;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
}
td:first-child {
  border-left: solid 1px #CCC;
}
table {
  border-top: solid 1px #CCC
}
<table>
  <tr>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
table {
  border-collapse: separate; /* the default option */
  border-spacing: 0; /* remove border gaps */
}
td {
  padding: 20px;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
}
td:first-child {
  border-left: solid 1px #CCC;
}
table {
  border-top: solid 1px #CCC
}
30
misterManSam

Chrome-Bugなので、回避策を考えてみましょう。これまでのところ、私はhtmlの変更を伴うものだけを思いついた：

http://jsfiddle.net/5366whmf/24/

別の行を追加します。

<table style="border-collapse: collapse">
 <tr><td colspan=2>top</td></tr>
 <tr><td style="height: 0"></td></tr> <!-- fix for chrome -->
 <tr><td style="border-top: 1px solid red">left</td><td>right</td></tr>
</table>
5
no_gravity