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' 属性是一个简写属性，用于为框的所有四个边框设置相同的宽度、颜色和样式。与简写的 'margin' 和 'padding' 属性不同，'border' 属性不能在四个边框上设置不同的值。为此，必须使用一个或多个其他边框属性。

另见：https ://developer.mozilla.org/en-US/docs/CSS/border-style

顺便说一句（根据问题标题），这与box-sizing财产没有直接关系；box-sizing控制如何计算盒子的尺寸（特别是，是否包括填充和边框）。它不会改变边框大小。

于 2012-09-08T04:10:55.893 回答