IE 和 Chrome 中的 CSS 填充问题答案

【问题标题】：CSS padding issues in IE and ChromeIE 和 Chrome 中的 CSS 填充问题
【发布时间】：2011-09-27 11:50:02
【问题描述】：

请查看以下内容 http://healthfacilitiesgroup.com/pm/phaseinfo.php 在 IE 和 Chrome 中。我希望该站点宽 8.5 英寸，两侧有 1 英寸的“边距”（意味着 6.5 英寸宽的段落等）。我认为这样做的方法是一个 8.5 英寸宽和 1 英寸填充的 div。这就是 CSS 的设置方式，但出于某种原因，IE 和 Chrome 的处理方式完全不同。我不是 html 的新手，所以谢谢你。

【问题讨论】：

标签： css internet-explorer google-chrome padding

【解决方案1】：

您没有 doctype，因此您的网站在 Quirks Mode 中呈现。怪癖模式 + IE = 无望。

您只需将其添加为第一行即可退出 Quirks Mode 并实现一致性：

<!DOCTYPE html>

这是 HTML5 文档类型，它会触发标准模式。

【讨论】：

永远，永远不要将 IE 用作工作方式的参考。始终，始终使用 any 其他浏览器来帮助验证您的标记。然后看看 IE 是如何搞砸一切的。但是 IE 的众多问题是众所周知的，修复它的黑客也是众所周知的。

【解决方案2】：

由于屏幕分辨率不同，很难在居中设计的任一侧获得相同数量（1 英寸）的边距。

与其以英寸为单位进行设计，不如以百分比为单位进行设计。这将为您提供更一致的外观，该外观会根据用户的屏幕分辨率进行扩展或收缩。

例如，您可以考虑将您的主要div 设置为80%，然后给它一个自动的margin，这会填满其他空间。比如……

div#main{width:80%, margin:0 auto;}

第一个数字0 从顶部和底部设置margin，auto 将其配置为与两侧匹配。

Padding，顺便说一下，处理元素内部的空间。在此处查看更多信息：http://www.goer.org/HTML/intermediate/margins_and_padding/

【讨论】：