边界框CSS无法正常工作 [英] Border-box CSS not working properly

问题描述

我有以下代码: 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的内部却得到了边框.

As far as I know that should give me an inner border on the left and right of 10px, but instead I get a border inside the whole thing of about 2px.

有什么想法吗?

推荐答案

在Chrome，Safari，IE 7/8/9中为我修复的问题: http://jsfiddle.net/XsNck/

Fixed for me in Chrome, Safari, IE 7/8/9: http://jsfiddle.net/XsNck/

我相信您的边界声明语法不正确.

I believe your border declaration syntax was incorrect.

不起作用

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

工作

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

根据规格:

"border"属性是用于设置相同属性的简写属性 框的所有四个边框的宽度，颜色和样式.不像 速记"margin"和"padding"属性，"border"属性 不能在四个边界上设置不同的值.为此，一个或多个 必须使用其他边框属性.

The ‘border’ property is a shorthand property for setting the same width, color, and style for all four borders of a box. Unlike the shorthand ‘margin’ and ‘padding’ properties, the ‘border’ property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

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

偶然地(根据问题标题)，这与box-sizing属性没有直接关系； box-sizing控制如何计算盒子的尺寸(具体来说，是否包括填充和边框).它不会更改边框大小.

Incidentally (in light of the question title), this isn't directly related to the box-sizing property; box-sizing controls how the dimensions of a box are calculated (specifically, whether or not to include padding and borders). It doesn't change the border size.

这篇关于边界框CSS无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！