Firefoxの点線の枠の置き換え

Question

私はborder-collapseの表とdottedの枠を持つ表を持っています。

Firefoxでのレンダリングが奇妙です。

コードは次のとおりです。

任意のアイデアはどのようにそれを修正する：

<table style="border-collapse: collapse"> 
 
    <tr> 
 
    <td style="border: 1px solid blue">a</td> 
 
    <td style="border: 1px solid blue">b</td> 
 
    </tr> 
 
    <tr> 
 
    <td style="border: 1px dotted blue">a</td> 
 
    <td style="border: 1px dotted blue">b</td> 
 
    </tr> 
 

 
</table>

これは、Firefoxの対Chromeでレンダリングする方法ですか？

Answer 1

browsers in rendering one pixel wide dotted bordersにバグがありますが、border of size 1pxの回避策はありません。この特定のケースでは、set the border width to 2px以上のバグが消えるようです。あなたはCSSアウトラインを使用することができます別の方法として

table td{ 
 
margin:0; 
 
}

<table style="border-collapse: collapse"> 
 
    <tr> 
 
    <td style="border: 2px solid blue">a</td> 
 
    <td style="border: 2px solid blue">b</td> 
 
    </tr> 
 
    <tr> 
 
    <td style="border: 2px dotted blue">a</td> 
 
    <td style="border: 2px dotted blue">b</td> 
 
    </tr> 
 

 
</table>

Answer 2

。

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

しかし、アウトラインが国境とは違っていることに留意してください：彼らは、要素の内容の外側に描画されているよう

アウトラインは、スペースを取ることはありません。

この場合、枠が崩壊すると、アウトラインがあなたの表のセルでお互いに実行されます。これは、-1px outline-offsetを追加することで修正できます。

2つの例は、アウトラインを使用する第1のテーブルと、比較のために境界を使用する第2のテーブルとである。

必須フィドル：

https://jsfiddle.net/sh9oqq2k/1/

ブラウザのサポート：

https://caniuse.com/#search=outline

/* global */ 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 8px; 
 
} 
 

 
/* outline */ 
 
tr:nth-child(1) td { 
 
    outline: 1px solid blue; 
 
    outline-offset: -1px; 
 
} 
 
tr:nth-child(2) td { 
 
    outline: 1px dotted blue; 
 
    outline-offset: -1px; 
 
} 
 

 
/* border */ 
 
table.bordered tr:nth-child(1) td { 
 
    border: 1px solid blue; 
 
} 
 
table.bordered tr:nth-child(2) td { 
 
    border: 1px dotted blue; 
 
}

<p> 
 
    Outline 
 
</p> 
 
<table> 
 
    <tr> 
 
    <td>a</td> 
 
    <td>b</td> 
 
    </tr> 
 
    <tr> 
 
    <td>a</td> 
 
    <td>b</td> 
 
    </tr> 
 
</table> 
 

 
<p> 
 
    Border 
 
</p> 
 
<table class='bordered'> 
 
    <tr> 
 
    <td>a</td> 
 
    <td>b</td> 
 
    </tr> 
 
    <tr> 
 
    <td>a</td> 
 
    <td>b</td> 
 
    </tr> 
 
</table>