2

私は次のコードを持っています：http ：//www.designated.net.au/testbed/test/

 body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background: #000000;
 }

 #page {
    margin:0% 10% 0% 10%;
    width:80%;
    height:1000px;
    border:solid #333333;
    border: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
 }

私の知る限りでは、10pxの左右に内側の境界線が表示されますが、代わりに約2pxの全体の内側に境界線が表示されます。

何か案は？

4

1 に答える 1

4

Chrome、Safari、IE 7/8/9で修正されました：http：//jsfiddle.net/XsNck/

国境宣言の構文が間違っていたと思います。

動作しない

border:solid #333333;
border: 0 10px;

働く

border-style: solid;
border-color: #333;
border-width: 0 10px;

仕様から：

'border'プロパティは、ボックスの4つの境界線すべてに同じ幅、色、およびスタイルを設定するための省略形のプロパティです。省略形の「margin」および「padding」プロパティとは異なり、「border」プロパティは4つの境界に異なる値を設定できません。これを行うには、他の1つ以上の境界プロパティを使用する必要があります。

参照：https ：//developer.mozilla.org/en-US/docs/CSS/border-style

box-sizingちなみに（質問のタイトルに照らして）、これはプロパティに直接関係していません。box-sizingボックスの寸法の計算方法（具体的には、パディングと境界線を含めるかどうか）を制御します。境界線のサイズは変更されません。

于 2012-09-08T04:10:55.893 に答える