响应式设计中的 CSS 填充疑难解答答案

【问题标题】：Troubleshooting CSS padding in responsive design响应式设计中的 CSS 填充疑难解答
【发布时间】：2011-09-15 11:48:57
【问题描述】：

这个简单的 HTML5 布局旨在在左侧有一个导航栏，正文文本浮动在它旁边（使用百分比而不是像素来实现流畅的响应式设计 - 计算在 CSS 中的 cmets 中。）

http://www.wturrell.co.uk/stackoverflow/20110615-01.html

'page' div 内元素的宽度加起来正好是 100%。我想为某些元素添加填充，在这种情况下是导航。如果我删除所有填充，它们会正确浮动，但是超过 1 或 2 个像素的填充（不管它指定的单位是什么）并且它会中断。我不明白为什么这会破坏布局，因为它是填充，所以肯定不应该改变块的整体大小？

我错过了什么？

更新 - 解决方案： http://www.wturrell.co.uk/stackoverflow/20110615-02.html

(元素显示宽度 = 宽度 plus 边框 plus 内边距。导航应标称总共 200 像素，右侧内边距为 20px，因此对于流畅的设计，宽度 = 180 /900*100 或 20%，内边距 = 20/900*100 或 2.222%，正文保持 700/900*100 或 77.777%。）

【问题讨论】：

标签： css padding fluid-layout

【解决方案1】：

首先，您需要添加一个文档类型来触发标准模式。没有这个，您的页面将使用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 之外的任何地方。

【讨论】：

酷，不知道 box-sizing :)。

【解决方案2】：

在CSS box model 中，将padding 添加到width 以获取框的整体大小。在您的情况下，如果宽度百分比加起来为 100%，即使 1px 也意味着内容溢出。

尝试以百分比设置填充，并在添加它们时将其考虑在内，或者在边缘保留 1% 或 2% 的缓冲区并以像素为单位添加小填充。

【讨论】：

感谢（也感谢@sandeep 和@thirtydot）-出于某种原因，我开始反其道而行之，并假设增加填充意味着内容宽度的减少。我已经编辑了这个问题包括一个固定版本 + 新的计算。

【解决方案3】：

@williant;亚历克斯是对的 padding & border 将 width 添加到一个元素。所以，根据padding调整width。

css：

#page nav {
    clear: both;
    display: inline;
    float: left;
    padding: 0 10% 0 0;
    width: 12.2222%;
}

【讨论】：

【解决方案4】：

您可以尝试使用box-sizing: border-box; 或设置max-width:100% 和/或max-height:100%;。

如果您想尝试保持兼容性，则 max-width 和 max-height css 选项与旧版本的 IE 兼容。

编辑：

使用下面的代码跨浏览器使用 box-sizing：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

【讨论】：