2

以下の css を div で実行しています。画面を印刷して幅を物理的に測定すると、firefox の幅は 181 ピクセルに加えて、左側に 1 ピクセル、右側に 1 ピクセルの境界線があります。しかし、Chrome で表示すると、幅は 179 ピクセルで、境界線は左が 1 ピクセル、右が 1 ピクセルです。箱の幅いっぱいまで食べてしまったかのように。誰でもこれに光を当てることができますか？

.tab{
    background:#fff;
    border-left:1px #000 solid;
    border-right:1px #000 solid;
    height:111px;
    width:181px;
}
4

1 に答える 1

3

ブラウザーによってボーダーの扱いが異なります。これを .tab クラスに追加してみてください。

.tab {
    ...
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

http://paulirish.com/2012/box-sizing-border-box-ftw/ および/またはhttp://css-tricks.com/box-sizing/を参照してください

または、次の手順を実行して、すべての要素についてこの「問題」を修正することもできます。

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
于 2012-09-26T22:01:01.087 に答える