我环顾四周,但未找到此问题的解决方案。使用以下CSSHTML 5,CSS边框轮廓不一致
border: double 1px #999;
outline: solid 4px #EAEAEA;
我能够很容易地创建一个围绕DIV的简单双边框。在HTML4中。然后我将文档类型切换为<!DOCTYPE html>
,此时底部轮廓偏移了大约5px。奇怪的是,只有底部的轮廓,因为其他三边仍然与边界齐平。
我错过了HTML5中的边框轮廓?我应该强调它在HTML4中看起来很完美。
我环顾四周,但未找到此问题的解决方案。使用以下CSSHTML 5,CSS边框轮廓不一致
border: double 1px #999;
outline: solid 4px #EAEAEA;
我能够很容易地创建一个围绕DIV的简单双边框。在HTML4中。然后我将文档类型切换为<!DOCTYPE html>
,此时底部轮廓偏移了大约5px。奇怪的是,只有底部的轮廓,因为其他三边仍然与边界齐平。
我错过了HTML5中的边框轮廓?我应该强调它在HTML4中看起来很完美。
它可能是怪癖模式框模型问题(如果您使用了未启用“标准模式”的不完整Transitional DOCTYPE
)。如果没有正确的DOCTYPE
,你可以模拟IE5的bug,包括一个“旧”盒子模型。
您得到的行为与<!DOCTYPE html>
被CSS规范认为是正确的。
理想情况下,您应该通过边框宽度来减小元素的尺寸以进行补偿。
或者(如果你在%
例如使用大小),开关盒模型,你所期望的一个(工作在IE8 +):
div {box-sizing: border-box;}
注意,它不仅影响边界。大纲将在框外,不会影响布局。您可以使用等效的margin
预留轮廓的空间。
在你测试过哪些浏览器? – Andre 2012-03-19 18:50:57
您尝试过哪些浏览器? – thomthom 2012-03-19 18:51:26
它工作正常:http://jsfiddle.net/Er4UE/请做一个演示。 – 2012-03-19 18:52:24