邊界框CSS工作不正常

我有以下代碼：http://www.designated.net.au/testbed/test/邊界框CSS工作不正常

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的東西。

任何想法？

來源

2012-09-08 dais

在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;

從規格：

的 '邊界' 屬性設置相同寬度的速記屬性，colo r和一個盒子的所有四個邊框的樣式。與速記「邊距」和「填充」屬性不同，「邊框」屬性無法在四個邊框上設置不同的值。爲此，必須使用其他邊框屬性的一個或多個。

參見：https://developer.mozilla.org/en-US/docs/CSS/border-style

順便提及（在問題的標題的光），這是不直接關係到box-sizing屬性; box-sizing控制箱子的尺寸是如何計算的（具體來說，是否包括填充和邊框）。它不會更改邊框尺寸。

來源

2012-09-08 04:10:55

適用於我以及Firefox 17（Aurora，17a2）。 –

它在Firefox中不適用於我。舊代碼和新代碼都可以在你的applet中使用。 – dais

你有更新你的網站嗎？如果是這樣，我可以看看。 –

邊界框CSS工作不正常

回答

相關問題