css: border-spacing 属性は IE6 IE7 IE8(Q) ではサポートされていません-CSSチュートリアル-php.cn

css: border-spacing 属性は IE6 IE7 IE8(Q) ではサポートされていません

黄舟

リリース： 2017-06-30 10:00:50

オリジナル

2098 人が閲覧しました

標準リファレンス

TABLE の 'border-collapse' は、TD ボーダーの 2 つのモードを定義します。 'border-collapse' の値が 'collapse' の場合、TD のボーダーは '分離' の場合にマージされます。 TD の境界線が結合されます。

'border-spacing'は、TDボーダー分離モードのTABLEの機能です。このプロパティは、TD 境界間の距離、または長さの値が 1 つだけ設定されている場合は水平および垂直のスペースを表します。 2 つの長さの値を設定した場合、最初の値は水平方向のスペース、2 番目の値は垂直方向のスペースになります。長さの値を負にすることはできません。

'cellspacing' TABLEタグの属性として、セル間の距離も指定できます。

CSS2.1仕様のTABLEボーダーモードの詳細な説明: 17.6 Borders。

CSS2.1 仕様の「border-spacing」機能の詳細な説明: 17.6.1 border-spacing。

HTML 4.01仕様の「セルスペース」の詳細な説明: 11.3.3 セルスペース。

問題の説明

TD ボーダーモードがデタッチモードのときに TABLE で 'border-spacing' が定義されている場合、IE6 IE7 IE8(Q) はこの属性をサポートせず、他のブラウザは仕様に準拠します。

影響

この属性が設定されている場合、この属性は IE6 IE7 IE8(Q) ではサポートされないため、ページレイアウトの違いが生じます。

影響を受けるブラウザ

IE6 IE7 IE8(Q)

問題分析

TABLE では、TD ボーダーモードが分離モードの場合、'border-spacing' コードは次のように定義されます:

<html>
<head>
<style type="text/css">
table{  border-collapse: separate;
  border: 1px solid red;  border-spacing:10px 20px;}
td{
  border: 1px dotted blue;
}
</style>
</head>
<body>
<table>
<tr>
  <td>aa</td>
  <td>bb</td>
</tr>
<tr>
  <td>cc</td>
  <td>dd</td>
</tr>
</table>
</body>
</html>

ログイン後にコピー

css: border-spacing 属性は IE6 IE7 IE8(Q) ではサポートされていません

visible,

IE6 IE7 IE8(Q) はこの属性をサポートしていません。

IE8(S) Firefox Chrome Safari Opera はこの属性をサポートし、仕様に準拠しています。

では、セル間隔と境界線間隔のレイアウトの違いは何でしょうか?次のコードを分析してください:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table{
  border: 1px solid red;
}
td{
  border: 1px dotted blue;
}
</style>
</head>
<body>
<table cellspacing=20>
<tr>
  <td>aa</td>
  <td>bb</td>
</tr>
<tr>
  <td>cc</td>
  <td>dd</td>
</tr>
</table>
</body>
</html>

ログイン後にコピー

各ブラウザのパフォーマンスは一貫しています:

css: border-spacing 属性は IE6 IE7 IE8(Q) ではサポートされていません