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

回答