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

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

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

边框CSS无法正常工作

1 个答案: