3

何らかの理由で、Chrome のユーザー エージェント スタイル シートで境界線の間隔をオーバーライドできません。今は2pxにしていますが、これを0pxにしたいです。border-collapse は問題なくオーバーライドされますが、border-spacing はオーバーライドされません。

-webkit-border-horizo​​ntal-spacing と -webkit-border-vertical-spacing も追加してみました

しかし、これらのオーバーライドも同様に機能しません。

私の HTML ドキュメント

<!DOCTYPE html>
<html>
  <head><link href="inventorystyle.css" rel="stylesheet" type="text/css"></head>
  <table border="0" cellspacing="0" cellpadding="0">
      <tbody>
         <tr>
             <td><img src="iron-helmet.png"></td>
             <td><img src="gold-helmet.png"></td>
             <td><img src="diamond-helmet.png"></td>
         </tr>
      </tbody>
  </table>  
</html>

私の在庫スタイル.css

table {
    border-collapse: collapse;
    border-spacing: 0px;
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
}
4

2 に答える 2

3

これは私を精神的に駆り立てていました。

cssを追加してみる img {display:block;}

これは私のためにそれを取り除きました。

于 2015-07-02T23:56:17.803 に答える
1

これは、Chrome がデベロッパー ツールで CSS ルールを表示する方法の単なるバグです。このborder-spacingプロパティは、Chrome で定義されているとおりに機能します。

この場合、table要素を検査すると、border-spacing情報が正しく表示されます。tdこれは、開発者ツールが誤解を招く情報を表示するなどの内部要素専用です。定義上、border-spacingプロパティはそれらに適用されないため、それらの値は関係ありません。「Computed」をクリックするとborder-spacing、継承されたプロパティであっても、計算されたスタイルがまったく含まれていないことがわかります。

この例では、a) 折りたたみボーダー モデルが使用されており、 b) HTML マークアップに属性が含まれており、CSS で明示的にオーバーライドしない限り、この属性が に設定されているborder-spacingため、table要素の の値も効果がありません。cellspacing="0"border-spacing0

于 2014-08-06T05:54:11.897 に答える