CSS的跨浏览器代码准则

4EB Studio — Fri, 11 Jun 2010 02:36:02 +0000

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

本文将向大家介绍一些非常重要的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”伪类，除了

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

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

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

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

请看以下这张图，5个不同浏览器中元素在不同的浏览器中表现是不一样的

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

但是对于单选按钮（radio），多文本输入框（textare），以及之前提到的选择框

这样做允许选择列表使用视觉效果将电影清单分开。

3.

标签可以用来定义或者进一步解释一组文字。当你将鼠标悬浮在使用了标签的文字上的时候，将会在其下方出现一个带有文字的方框。看看下面的例子：

The microblogging site <acronym title="Founded in 2006"> Twitter</acronym> has recently struggled with downtimes.

效果预览:

SEO is full of trickery and magic.

4.

是一个非常不起眼的小标签，但是它并非没有可用之地。顾名思义，

允许你对HTML中的地址添加语义代码。这个代码可以将标记内的文字斜体化。当然，你也可以通过CSS改变样式。

<address>Glen Stansberry </address>

1234 Web Dev Lane

Anywhere, USA

5. 和

如果你想使用标记来显示编辑修订效果，和~~正式你所要的。正如名字所暗示的，使用下划线突出显示添加的，~~使用删除线显示被去除的。~~~~

John <del>likes</del> <ins>LOVES</ins> his new iPod.

效果预览:

John ~~likes~~ LOVES his new iPod.

6.

当写代码的时候表单元素很容易被忽略。而其中一个最容易被忽略的就是标签。标签不仅可以快速注解你的标签文字，而且可以使用”for”语句定义哪个元素被赋予到了该标签。这些标签不仅可以用来定义样式，而且可以让你为关联元素设置标题点击。

<label for="username">Username</label>

<input id="username" type="text" />

7.

是一个很少用的属性，他可以添加到你的表单上为表单元素创建一个逻辑组。一旦应用了

标签，所有表单元素将会被一个方框缩包围。你可以在

标签内使用来定义该组的标题。

<form><fieldset></fieldset></form>

Are You Smarter Than a 5th Grader?

Yes
<input name="yes" type="radio" value="yes" />

No
<input name="no" type="radio" value="no" />

效果预览:

8.

和是同类标签，不过仅仅用来定义缩写单词。和一样，当你在缩写字符元素上使用鼠标悬浮的时候，该缩写的完整定义将会出现在下方。极少被使用，但是对于多数屏幕阅读者，语法检查者和搜索引擎来说非常有用处。

<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.

效果预览:

Sgt. Pepper’s Lonely Hearts Club is my favorite album.

9. rel

Rel可能是一款超级有用的属性，任何HTML元素都可以应用它。它对于读取那些没有被特别定义的额外的变量非常有帮助。当你在HTML中使用Javascript的时候非常有用。如果你有一个链接，并想进行行内编辑，你可以这样做：

<a rel="clickable" href="page.html">This link is editable</a>

Javascript可以寻找带有”clickable”属性的链接，然后应用Ajax技术使该链接可以被进行行内编辑。而这仅仅是rel属性众多技术中的一个。

10.

是一个非常偏僻的标签。说实话，我怀疑你们是否有人接触过它。从本质上讲，这个标签允许你在指定的地方进行切断换行。不过这个标签非常独特，它需要依赖浏览器的分辨能力。这个标签对于想要避免出现垂直滚动条的情况非常有用。

如果你想使用这个效果，你可以试试看这个标签。不过需要注意的是，它并不被所有浏览器支持，具体的技术指标情参看这篇文章。

<span>How do you say Supercalifragilisticexpialidocious?</span>

[原文链接]

四眼天兔工作室 » 天兔贴士

CSS的跨浏览器代码准则

了解CSS的盒模型

了解Block和Inline的区别

了解浮动和清理

了解IE最常见的问题

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

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

3.

4.

5. 和

6.

7.

8.

9. rel

10.