边框CSS无法正常工作

Question

我有以下代码：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的内部边界。

有什么想法吗？

Answer 1

在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"one_answers"padding"属性，"border"属性不能在四个边界上设置不同的值。为此，一个或多个必须使用的其他边界属性。

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

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