开发人员们总在讨论最令人满意的网页设计莫过于在任何浏览器都能显示出相同的直观且漂亮的效果。不幸的事，大家都一致认为实现这样的目标几乎是不可能的。不过，近乎于精确的跨浏览器体验还是可以实现的。作为开发人员，我们的目标不应该仅仅局限于保证网页能够在每个浏览器都能够正常运作，而应该是如何保证跨浏览器运作所需的代码最小化，及其所能带来的日后网站维护及运作的顺畅化。

本文将向大家介绍一些非常重要的CSS规则和技巧，帮助开发人员实现以尽量少的代码来实现多浏览器的一致性。

了解CSS的盒模型

这是你要实现使用最少的hack来实现跨浏览器布局一致性首先要了解的事情。幸运的是，盒模型并不是很难掌握的，他在所有浏览器上的工作基本是一致的，除了个别的IE版本。

盒模型是用来计算以下事项的：

• 块状元素间的距离是多少
• 边框（borders）和/或空白边（margins）是否重叠（overlap）或叠加（collapse）
• 盒子的大小
• 在某种程度上，盒子相对于其他页面内容的位置

盒模型遵循以下规则：

• 块状元素基本都是矩形
• 块状元素的计算包括宽（width），高（height），填充（padding），边框（border）以及空白边（margins）
• 如果没有定义高，块状元素的高度将和其内部内容加上填充的高度之和一致（除非使用了浮动，见下）
• 如果没有定义宽，非浮动框将延展到其父元素宽度减去填充的位置（后面会提到）

处理盒模型元素一定要注意的事项：

• 如果一个盒子的宽度设置为“100%”，那么就不要再设置任何空白边（margins），填充（padding）和边框（border），否则会溢出其父元素
• 垂直比邻的空白边可能会导致一些复杂的叠加问题从而产生布局问题
• 相对定位或绝对定位的元素会有不同的表现形式，本文暂不涉及此部分内容

Firefox的Firebug中显示的盒模型样式

了解Block和Inline的区别

下图描述了块级元素（block）和行内元素（inline）的区别：

这里有一些基本的规则可以区分块状元素（block）和行内元素（inline）：

• 在默认情况下，块状元素会自动水平延展填充其父元素，因此没有必要设置宽度为“100%”
• 在默认情况下，块状元素开始于其父元素的最左侧边缘，以及任何在其之前元素的下方（除非设置了浮动或者定位）
• 行内元素会忽略宽度和高度设置
• 行内元素会随着文字进行浮动，并且会根据排版属性进行调整，如white-space， font-size， 以及letter-spacing
• 行内元素可以使用vertical-align属性进行排列，但是块状元素不行
• 行内元素会在下方自动生成一些空间来容纳低于水平线的文字元素（如字母“g”）
• 如果行内元素设置了浮动就变成了块状元素

了解浮动和清理

对于多栏布局来说，使用浮动设置是最好的解决方案。

一个进行了浮动设置的元素既可以向左浮动也可以向右浮动，直到他们达到其父元素或者其浮动元素的边缘。在浮动元素下面的非浮动元素，行内元素将沿着浮动元素的边界向另一方向浮动。

在进行元素的浮动或者清理设置的时候要注意以下几点：

• 浮动元素是和其他块级、非浮动元素流体中区分出来的。换句话说就是，如果你将一个盒子向左侧浮动，那么尾随其后的、没有进行过浮动设置的段落（块级）将会在一个堆栈中出现在其后面，并且段落中的文字（行内级）将会围绕浮动元素进行排列。
• 要想使内容围绕浮动元素排列，其必须是行内元素，否则将会和浮动元素朝同一方向进行浮动
• 如果一个浮动元素没有设置宽度，那么和其内容宽度保持一致，因此，最好给浮动元素都设置一个宽度
• 如果一个浮动元素内还含有子元素，那么它将被“叠加（collapse）”，这就需要进行修复
• 被“清理（cleared）”过的元素将会避免围绕其前面的浮动内容进行排列
• 一个既被设置过清理也被设置过浮动的元素，只能清理其前面的元素，而不是后面的

了解IE最常见的问题

如果你要用IE进行开发，或者要检查IE的布局情况，那么你就应该在开始工作之前充分了解IE（通常是IE6和IE7）会遇到的各种问题：

• 如果使用了浮动设置，IE6将会出现内容消失或者文字重复的问题
• 在相同方向的浮动元素上，IE6会使空白边（margins）产生双倍大小；通常的解决方案是设置“display: inline”
• 在IE6和IE7中，如果元素没有进行布局设置（比如宽高设置等），将会产生一系列的问题，包括不显示背景，空白边叠加不正确等等
• IE6不支持最小（min-）和最大（max-）的CSS属性，比如min-height，或max-width
• IE6不支持背景图片的固定定位
• IE6 和IE7不支持很多显示属性（display）的值（如：inline-table，table-cell，table-row，等）
• 你不能在IE6的任何元素中使用“:hover”伪类，除了<a>

除了以上还有很多很多的bug，但是这些都是在进行跨浏览器体验中最常见也最重要的。希望广大开发人员能够对以上提到的几点进行更多深入的研究，以便能够更精确的掌握问题所在及如何处理。

一些可能永远都不会一样的东西

正如已经提到的，想在每种浏览器中都得到完全相同的视觉和功能体验是不太可能的。你可能能将元素的像素精确度做到最大化，但是有些事情不是开人人员可以掌控的。

表单外观通常都是不一样的

请看以下这张图，5个不同浏览器中<select>元素的样式是不一样的：

<select>元素在不同的浏览器中表现是不一样的

一些表单元素的外观是可以控制的。比如客户要求表单的提交按钮必须在每个浏览器中都一样，那么你可以使用图片来代替默认的<input type="submit">

但是对于单选按钮（radio），多文本输入框（textare），以及之前提到的选择框<select>元素，除非使用JavaScript 扩展，否则无法实现样式统一。

文字排版通常也不一样

另一个不能期望通过像素化来统一外观的问题就是字体，特别是正文字体。现在已经有很多方法可以解决标题字体，比如最近出来的Google Font API。但是不同浏览器的正文字体显示通常还是会有区别的。

对于文字排版，我们面对的不仅仅是不同机制下字体的可用性问题，而是即使在两个不同机制下字体均可使用，但是他们的外观表象确会有所不同。例如，Windows ClearType，IE7可用，但是IE6不可用，从而导致相同字体在不同浏览器上显示效果不同。

下图是在IE6和IE7上显示的一段 A List Apart 网站页面截屏。在IE6中，标题字体的锯齿状比正文字体对比IE7来说要明显很多：

List Apart 网页排版效果IE6和IE7对比

使用CSS重置（CSS Reset）

每次使用CSS重置的时候，控制跨浏览器体验的能力都会大大提高。可以说大多数CSS重置都会增加一些不需要的代码，但是你可以去掉那些你认为不必要的选择器（比如，你可能在页面中不计划使用<blockquote>标签，那么你就可以去掉它）

通常在没有使用CSS重置的情况下，和 margin- 以及 padding- 相关的设置都会使不同浏览器之间产生或多或少的差异。重置将会使不同浏览器的所有元素的值都从0开始，这样你可以更好的控制间距和对齐。

Firefox开发人员工具栏上显示的CSS重置代码

除了跨浏览器体验外，重置可以减少你使用hack的量，你的代码将会变得更为简洁，并且更易维护。推荐使用Eric Meyer的CSS reset。

使用SitePoint提供的CSS参考表单

如果你在跨浏览器测试中使用CSS属性遇到问题，你可以参考SitePoint CSS Reference。该参考表单包括一些实用的不同浏览器对CSS属性支持的比较。

SitePoint的CSS属性值比对表

[原文链接] [链接2]