CSS跨浏览器开发原则 转.docVIP

CSS跨浏览器开发原则 转 在互联网设计过程中，可以说没有什么比开发出一个能够在当前所有浏览器下都具有同样吸引眼球效果的设计更让人高兴的事了。遗憾的是，这个目标似乎都被普遍认定为不太可能实现。甚至有些人抛弃了对完美的追求，认为跨浏览器的兼容性并不是必备的。 虽然我也同意每个项目都实现浏览器的完全兼容性，即所有web浏览器(暂且不考虑手机浏览器)用户都能体验相同的完美设计效果是永远都不可能的，但是，我相信大多数情况下近乎完全兼容性却是可以实现的。作为开发人员，我们的目标不应该仅仅停留在让项目在每个浏览器都能运作，而应该尽可能用最少的代码让项目在每个浏览器中都能实现尽善尽美，让今后网站的维护更加轻松。 这篇文章将向大家介绍一些最为重要的CSS开发原则和技巧，希望能够帮助前端开发的新手和老生用最少的CSS代码实现跨浏览器体验的一致性。 CSS盒模型(Box Model) CSS盒模型是网页布局的基础，如果你想要实现跨浏览器布局的一致性，这是第一个必需透彻学习的对象。好在，它并不难掌握而且通常在所有浏览器上的效果都是一样的，除了某些情况下会与IE的版本相关(这个后面会详细谈到)。 CSS盒模型负责计算： 一个块级(block-level)元素占用多少空间。边框(border)和/或外边距(margins)是否重叠或崩溃。一个盒的尺寸大小。从某种程度上说，它可决定一个盒与页面中的其他内容的相对位置。CSS盒模型的基本规则如下： 块级(Block-level)元素基本上是矩形。块元素的尺寸是通过宽、高、填充、边框和外边距来计算的。如果没有指定高度，块元素将会依据它所包含的内容来显示高度加上填充(除非设置了浮动floats，见下文)。如果没有指定宽度，就会出现一个非浮动non-floated盒并以适应父盒的宽度显示，减去填充(下文有更多介绍)。关于块级元素，需要切记以下几个要点： 如果某个盒子(box)的宽度设定为100%，它就不能有任何外边距、填充或边框，否则它就会溢出父盒子。垂直相邻外边距可能会导致复杂的崩溃问题而最终造成布局出问题。相对位置的元素和绝对位置的元素是有区别的，这个涉及的东西比较多，这篇文章就不介绍。 在Firefox中使用Firebug显示的盒模型(box model) 块级元素Block和内联元素Inline的区别 经验丰富的开发人员可能觉得这没什么好说的，不过，我觉得这个一个非常重要的问题，要是能够做到透彻理解，你就会说啊，原来如此很多头疼的问题就会迎刃而解，以后对创建跨浏览器布局信心也会大大增强。 下面的图片说明了块级元素block和内联元素inlin的区别： Block元素默认情况下会自然横向扩展来填充父容器，因此没有必要设置宽度为100%。Block元素默认情况下会从父盒的最左边开始低于以往任何块元素(除非使用漂浮或定位元素，见下文)。Inline元素无视宽度和高度的设置。Inline元素会与文本一起流动，并受排版属性如空格、字体大小和字母间距的影响。Inline元素可以使用垂直对齐属性对齐，而block元素不能。Inline元素的下方会自然留出一些空间以容纳破行掉下的文本元素。inline元素如果设置为漂浮可以变成块元素。浮动和清除元素 为了让队列布局相对易于维护，最佳的办法就是使用漂浮(floats)。因此，想要实现跨浏览器体验的一致性，对float是如何运作的是否有扎实的理解就成为了另一个非常重要的因素。 一个浮动元素可以向左或是向右浮动，使用浮动的结果是，浮动元素会依据指定的方向漂流直到它的边缘碰到其父容器或是另一个浮动元素的边缘。所有非浮动，出现在浮动元素下方的内联内容将会朝浮动的相反方向沿着它的边缘流动。 关于浮动和清除元素，需要切记以下几个要点： 浮动元素时从其他块级元素、非浮动元素上移动出来的，换句话说，如果你将一个盒元素向左侧浮动，那么非浮动的尾随段落(块级别元素)将会出现在浮动元素的后面，段内的任何文本(内联级别元素)将会围绕浮动元素流动。想要让内容围绕着一个浮动元素流动，需要确保它是属于内联元素或与浮动元素的方向一致。如果浮动元素没有指定宽度，将会压缩至内容的宽度，因此，通常最好还是给浮动元素设定一个宽度。如果块元素包含了浮动的子元素，就会造成块元素崩溃，需要进行修复。从IE开始着手开发 到现在为止，这篇文章还主要讲CSS代码和布局的原则。是否先从IE开始着手更多是与设计师的习惯和偏爱有关联的。虽然在日常上网我们可能很讨厌使用IE6和IE7，但是为客户开发项目时，在开发初期首先要做的就是在这些浏览器中测试页面布局。一开始就确保它在IE6、IE7上的兼容性，以后再对其他浏览器进行测试和可能需要的修改，会比反过来简单得多。要是等到开发后期才检查IE6、IE7的兼容性可能会造成下面的问题： 需