1

次の CSS を含むテーブルがあります。

width: 100%;
border-spacing: 0px;
table-layout: fixed;

次に、次のクラスで指定された 3 つの列があります。

@UsedColumnWidth: 26px;
@DeleteColumnWidth: 18px;

.UsedCountColumn {
    width: @UsedColumnWidth;
}
.DeleteColumn {
    width: @DeleteColumnWidth;
}
.CapabilityColumn {
    /*width: @ContainerWidth - @UsedColumnWidth - @DeleteColumnWidth;*/
    /*width: 100px;*/
}

UsedCountColumnクロム開発者ツールを調べたときに、幅が指定したよりも 2 ピクセル多いことに気付きましたが、DeleteColumnなぜこれが発生するのかわかりません。おそらく境界線の間隔が台無しになっていると思いましたが、それを0に設定しています.なぜこれが起こっているのかについてのアイデアはありますか?

4

2 に答える 2

2

これが、パディングを表示せずに追加する理由です。私はあなたがLESSを使用していると思います:)

「ブラウザのデフォルト css」について話している場合は、確かにいくつかのパディングとマージンがあります。

人々が reset.css 文書を作成する理由は、ブラウザによって「デフォルトの css 値」が異なるためです。

例えば。ブラウザによっては、背景がより灰色または黄色に近いものもあれば、完全に白いものもあります。

レイアウトを改善し、他のブラウザでも同じように表示するには、css をリセットする必要があります。

例。

* {
   margin: 0;
   padding: 0;
   /* ect styles */
}

そしての..

ビジュアルの合計幅 = パディング + 幅 + ボーダー

塗りつぶしの合計幅 = パディング + マージン + 幅 + ボーダー

高さ ofc にも同じことが言えます:)

于 2012-12-18T16:19:08.433 に答える
0

これは、1px の境界線があり、要素に合計 2px を追加しているためだと思います。この場合、境界線を維持できますが、代わりに追加するbox-sizingか使用する必要がありますoutline。

于 2012-12-18T16:20:29.913 に答える