跨浏览器CSS编码的准则

from: smashing magazine
title: The Principles Of Cross-Browser CSS Coding
觉得蛮好的，渣翻译一下

在网页设计中，没有什么比让一个美丽和直观的网页在当前的所有浏览器中呈现的效果都相同更让人满意的目标了。不幸的是，这个目标通常被认为几乎不可能实现。有些观点甚至认为完美的，跨浏览器兼容性是不必要的。

虽然我同意为每个浏览器的每个用户创建一致的体验（暂时搁置移动平台）不会在每个项目中发生，我相信在很多情况下可以实现近乎完全的跨浏览器体验。 作为开发人员，我们的目标不应该是让它在每个浏览器中工作; 我们的目标应该是让它在每个浏览器中使用最少的代码运行，允许未来的网站维护平稳运行。

在本文中，我将描述我认为是最重要的一些CSS原则和技巧，可以帮助新的和有经验的前端开发人员尽可能达到一致的跨浏览器体验(experience)开发，同时尽可能少的CSS 代码。

理解CSS盒子模型

这是你应该完全熟悉的第一件事情之一，如果你希望使用非常少的hacks和变通方案实现跨浏览器布局。 幸运的是，盒子模型不是一个难以掌握的东西，并且一般在所有浏览器中工作形式相同，除了在与某些版本的Internet Explorer相关的情况下（稍后讲解）。

CSS框模型负责计算：

• 块级元素占用了多少空间
• 边框和/或边距是否重叠或折叠
• 盒子的尺寸
• 在某种程度上，盒子相对于页面上其他内容的位置

CSS框模型有以下基本规则：

• 块级元素基本上是矩形的（就像所有元素一样）
• 块元素的尺寸通过宽度，高度，内边距，边框和外边距计算
• 如果没有指定高度，块元素将与其包含的内容一样高，加上内边距（除非有浮动，见下文）
• 如果未指定宽度，则非浮动框将展开以适合其父级的宽度减去内边距（稍后详述）

处理块级元素时需要注意的一些重要事项：

• 如果一个框的宽度设置为“100％”，它不应该有任何外边距，内边距或边界，否则会从其父辈元素溢出。
• 垂直相邻的边距可能会导致一些复杂的折叠问题，从而导致布局问题
• 相对或绝对定位的元素将有不同的呈现，其具体细节超出本文的范围
• 上面的规则和原则是在假设以标准模式呈现的包含块级元素的页面情况下进行说明的

了解块和内联之间的区别

对于有经验的开发人员，这是另一件容易的事。 然而，这是另一个重要的领域，完全理解后，将会产生许多灵感，避免很多令人头痛的问题，你会对创建跨浏览器布局感到更有信心，

下面的图片说明了块和内联元素之间的区别：

图片文字翻译
块级元素：自然展开以适应
内联元素：内联元素只与内容一样宽，并且将与文本一起流动

以下是区分块元素和内联的一些基本规则：

• 默认情况下，块元素将自然水平扩展以填充其父容器，因此不需要设置宽度为“100％”
• 默认情况下，块元素将从父容器的最左边缘开始，位于任何之前的块元素下面（除非使用浮动或定位元素;见下文） 内联元素将忽略宽度或高度设置
• 内联元素随文本一起流动，并且受空白，字体大小和字母间距等打印属性的制约
• 内联元素可以使用vertical-align属性进行对齐，但块元素不能

了解浮动和清除

对于相对容易维护的多列布局，最好的方法是使用浮动。因此，实现跨浏览器体验中另一个重要因素就是透彻理解浮动是如何工作的。

元素可以向左或向右浮动，浮动的结果是元素将沿着指定的方向移动，直到到达它的父容器的边缘，或另一个浮动元素的边缘。所有出现在该浮动元素下方的非浮动，内联内容将沿着元素边缘按相反的方向浮动。

以下是浮动和清除元素时需要注意的一些重要事项：

• 浮动元素从其他块级非浮动元素的流中移除；所以换句话说，如果你向左移动一个框，一个没有浮动的结尾段落（块级别）会出现在堆栈中的浮动元素后面，段落内部的任何文本（内联级别）将在浮动元素周围环绕
• 要使内容在浮动元素周围流动，它必须是内联的或者在相同方向上浮动
• 没有声明宽度的浮动元素将缩小至其内容的宽度，因此通常最好在浮动元素上设置一个宽度
• 如果块元素包含浮动子项，它将“折叠”，需要修复
• 被“清除”的元素将禁止文档中在它上方的浮动元素
• 一个既被清除又被浮动的元素只会清除在其之前的元素，而不是之后的元素

注：clear 属性规定元素的哪一侧不允许其他浮动元素。

首先使用Internet Explorer（或不要）

请注意，Smashing Magazine的团队强烈建议不要首先在Internet Explorer中开发网站。 在我们看来，网站应该开发在“现代”的网络浏览器，首先标准版，然后调整为Internet Explorer的版本。

到目前为止，我讨论的大多数与CSS编码和布局原则有关。 这个原则更多地与大多数设计师的习惯和偏好相关。 虽然我们可能讨厌在日常中使用IE6和IE7，当需要从头开始构建一个客户端项目时，你可以做的最好的事情之一是在开发早期用这些浏览器中测试你的布局。 你甚至可能想打开一个独立版本的IE6或IE7，仅仅在该浏览器进行开发。

当然，你不能访问像Firebug这样的工具，但通常对于CSS（特别是在开发早期），你不需要Firebug。 首先在IE6和IE7中得到一个布局，然后为其他浏览器进行修改是更容易的一件事。 等到开发过程后期再打开IE6和/或IE7可能会导致（可能不是全部）以下问题：

• 需要多个hack，需要为不同版本的IE制作单独的样式表，导致代码臃肿，可维护性差，使得网站运行慢
• 某些地方的布局可能需要重做，增加开发时间
• 测试时间将增加，有时呈指数级增长，占据其他更重要的任务的时间
• 其他浏览器中的布局将不同于IE6和IE7中的布局

我不期望开发人员在个人项目，网络应用或其他非客户端项目中积极地使用Internet Explorer。 但对于用户群以使用IE为主的企业客户端，这个提醒可以防止很多麻烦，并且肯定会使跨浏览器体验更好。

有时将IE的问题看作“烦人的bug”可能会产生不必要的消极性，并且可能会阻碍开发时间和未来维护。 处理IE是设计师和开发人员不可避免的，so just view its problems as you would any CSS issue，并从那里构建。

了解IE最常见的问题

如果你要在开发中从IE开始，或者至少在早期用IE检查你的布局，那么你应该明白Internet Explorer（通常是版本6和7）有什么问题，或者它的限制是什么 。

对Internet Explorer中可能出现的每个可能问题进行详细讨论，以及对所有CSS兼容性问题进行列表当然超出了本文范围。 但是有一些所有CSS开发人员都应该注意的，出现在IE中的相当重大的不一致性和问题。 以下是您需要处理的最常见问题的总结：

• 如果过度使用浮动，IE6会引起（反常的）内容消失或文本重复
• IE6将使浮动元素的与浮动方向相同的外边距加倍; 设置display：inline通常会解决这个问题
• 在IE6和IE7中，如果一个元素没有布局，它可能会导致一些问题，包括背景不显示，边距不正当重叠……
• IE6不支持基于min和max的CSS属性，如min-height或max-width
• IE6不支持背景图像的固定定位
• IE6和IE7不支持display属性的许多值（例如，inline-table，table-cell，table-row等）
• 不能在IE6中的任何元素上使用:hover伪类，除了锚点（）
• 某些版本的IE几乎不支持某些CSS选择器（例如属性选择器，子选择器等）
• IE版本6-8几乎不支持CSS3，但有一些解决方法