HTML 5，CSS邊框輪廓不一致

我環顧四周，但未找到此問題的解決方案。使用以下CSSHTML 5，CSS邊框輪廓不一致

border: double 1px #999; 
outline: solid 4px #EAEAEA;

我能夠很容易地創建一個圍繞DIV的簡單雙邊框。在HTML4中。然後我將文檔類型切換爲<!DOCTYPE html>，此時底部輪廓偏移了大約5px。奇怪的是，只有底部的輪廓，因爲其他三邊仍然與邊界齊平。

我錯過了HTML5中的邊框輪廓？我應該強調它在HTML4中看起來很完美。

2012-03-19 Andy

在你測試過哪些瀏覽器？ – Andre 2012-03-19 18:50:57

您嘗試過哪些瀏覽器？ – thomthom 2012-03-19 18:51:26

它工作正常：http://jsfiddle.net/Er4UE/請做一個演示。 – 2012-03-19 18:52:24

它可能是怪癖模式框模型問題（如果您使用了未啓用「標準模式」的不完整Transitional DOCTYPE）。如果沒有正確的DOCTYPE，你可以模擬IE5的bug，包括一個「舊」盒子模型。

您得到的行爲與<!DOCTYPE html>被CSS規範認爲是正確的。

理想情況下，您應該通過邊框寬度來減小元素的尺寸以進行補償。

或者（如果你在%例如使用大小），開關盒模型，你所期望的一個（工作在IE8 +）：

div {box-sizing: border-box;}

注意，它不僅影響邊界。大綱將在框外，不會影響佈局。您可以使用等效的margin預留輪廓的空間。

2012-03-19 20:02:30 Kornel

這裏是我的演示：http://jsfiddle.net/Bzpj4/ – Andy 2012-03-19 20:27:46

@Andy：添加'邊距：4px;'。輪廓總是在盒子外面，它永遠不會推開任何東西。 – Kornel 2012-03-19 20:31:24

你可以用你的意思更新小提琴:) – Andy 2012-03-19 20:35:18

回答