这个简单的HTML5布局旨在左侧有一个导航栏，主体文本与它一起浮动（使用百分比而不是像素表示流畅的响应式设计 - 计算在CSS中的注释中。）
http://www.wturrell.co.uk/stackoverflow/20110615-01.html
'page'div中元素的宽度总计达到100％。我想为某些元素添加填充，在本例中为nav。如果我删除所有填充，它们正确浮动，但超过1或2个像素的填充（无论它指定的单位），它会中断。我不明白为什么这会破坏布局，因为它的填充因此肯定不会改变块的整体大小？
我错过了什么？
更新 - 解决方案： http://www.wturrell.co.uk/stackoverflow/20110615-02.html
（元素显示宽度=宽度加上边框加上填充。导航应该是标称200像素，右边是20px填充，因此对于流体设计，宽度= 180 / 900 * 100或20％，填充= 20/900 * 100或2.222％，正文仍为700/900 * 100或77.777％。）
答案 0 :(得分：7)
首先，您需要添加doctype以触发标准模式。如果没有这个，您的网页将使用Quirks Mode，这会在特别是Internet Explorer中导致恶魔般的问题。
添加为第一行：
<!DOCTYPE html>
接下来，@ Alex Ciminian的答案对于箱子模型是正确的（padding不被视为width的一部分）。您可以将width精确减少padding，或者：
使用box-sizing: border-box：https://developer.mozilla.org/en/CSS/box-sizing
您可以将其添加到您希望padding计算中包含width的任何元素：
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
有关详细信息，请参阅：http://css-tricks.com/box-sizing/
此属性的浏览器支持很好：http://caniuse.com/css3-boxsizing - 除了IE6 / 7之外的任何地方。
答案 1 :(得分：6)
在CSS box model中，padding已添加到width以获取整个框的大小。在您的情况下，如果宽度百分比加起来为100％，即使1px也意味着内容溢出。
尝试以百分比设置填充并在添加填充时将其考虑在内，或者在边缘留下1％或2％的缓冲区并添加小填充（以像素为单位）。
答案 2 :(得分：3)
@williant; Alex正确padding & border将width添加到元素中。因此，请根据width调整padding。
<强>的CSS：
#page nav {
clear: both;
display: inline;
float: left;
padding: 0 10% 0 0;
width: 12.2222%;
}
答案 3 :(得分：1)
您可以尝试使用box-sizing: border-box;或设置max-width:100%和/或max-height:100%;。
如果您想尝试保持兼容性，则max-width和max-height css选项与旧版IE兼容。
编辑：
使用以下代码在浏览器中使用大小调整文件：
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;