世纪金鼎购物中心销售折页

4EB Studio — Tue, 29 Jun 2010 04:32:54 +0000

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），以及之前提到的选择框

四眼天兔工作室