书写跨浏览器的CSS代码

9顶
0踩

2010-06-10 18:19 by 主编 ITeye管理员评论(4) 有6218人浏览

浏览器 CSS

非原创，在Smashing上看到一篇“The Principles Of Cross-Browser CSS Coding”，顿时觉得“哎哟，不错哦~”，呵呵，挑选一些东西翻译一下。

不管是写JavaScript还是写CSS，对于网页开发者来说，最头疼的事情就是要支持多浏览器，而不管是JS还是CSS，虽然都有国际标准站在那里指点江山，可惜各个浏览器厂商还是自说自话，对于JS和CSS的实现方式和支持程度都各不相同。对于网页开发人员来说，一直希望找到最轻便的方式来得到跨浏览器的支持，这也是为啥有那么多JavaScript和CSS的库和Framework可用的原因。

上面提到的这篇文章的作者就是这样一个意思。所有的开发人员都希望能够在每个浏览器中得到完全一致的网站渲染结果，得到完全相同一致的设计实现，不过很难！所以，作者希望给出几条最基本的CSS编码指导思想，最后能够达到的目标就是在所有浏览器里面看着基本差不多，然后尽量少写多余的CSS代码~哎哟，听上去不错哦~呵呵

理解CSS盒子模型

对于任何希望写出跨浏览器CSS代码的同学来说，最需要深刻理解的第一件事情就是CSS盒子模型（Box Model）。CSS的盒子模型理解起来不难，而且大部分的浏览器实现方法基本上也相同，出了一些特定版本的IE。

( 这里可以插一句就是浏览器是如何渲染网页布局的，比如div如何渲染，p如何渲染。对于浏览器来说最基本的工作之一是把网页内容从服务器上下载下来，然后把这些网页内容画到屏幕上，真的是“画”哦，所以，浏览器中非常相当重要的一个核心组件叫做布局渲染引擎——Layout Engine，各大浏览器使用的布局渲染引擎都不一样——所以才有上述跨浏览器问题的存在，比如Firefox或者说Mozilla家族的布局引擎叫做Gecko，Safari、Chrome等都是属于Webkit家族的，而IE使用的Trident的。布局引擎如何把网页内容画到屏幕上呢？在对网页内容进行解析之后，布局引擎会把这些div阿p阿h1阿影射成一个一个的长方形，计算好每个元素所占长方形的大小/偏移/位置关系等等，然后把这些长方形对应到屏幕的实际坐标上，再把具体的内容绘画在这些长方形中。简单说吧，就是这样的，呵呵。在这个过程中有很多步骤，同时也有很多对关键步骤描述的术语，比如Frame Construction、Reflow等等。CSS的盒子模型是计算这些长方形和进行Reflow等操作的核心模型。)

CSS盒子模型主要用来计算：

Block型元素占据多大地方
盒子的边界/边距等会不会彼此重叠，比如上下两个盒子都有边距，那可能这个边距会重叠在一起（可能具体浏览器实现也不太相同）
盒子的大小
盒子同网页中其他元素的关系

CSS盒子有如下基本规则：

Block型元素本质上都是长方形（其实所有元素都是，像前面说的那样）
Block元素大小的计算参数包括长、宽、内边距padding、边界border和外边距margin
如果没有指定元素高度的话，元素的高度取决于内部元素的高度+内边距padding
如果没有指定元素宽度的话，非浮动元素会自动撑开去适合父元素的宽度-父元素的内边距padding

( 个人认为在写CSS的关于布局部分的代码时，脑袋中可能时刻都要想象一下这个盒子模型，会大大帮助你对布局进行控制，而事先的计算以及一些简单的方式也会方便今后的维护，反正这里的计算大不了就是多几个变量，但是基本都是一次方程。而借助于类似于Firebug这样的调试工具更是能够清楚的了解元素的实际大小和布局信息。)

这里有几条比较重要的事情要记住：

如果您设定了一个盒子的宽度为100%的话，那么这个盒子不能有任何内外边距或者边界，要不然肯定会撑破父元素
竖直方向上彼此相邻的元素的外边距可能会重叠在一起，不同的浏览器实现不一样，（比如上方元素外边距为5px，下方元素外边距为5px，这两元素在竖直方向上这个5px的边距可能就被重合在一起，他俩之间的距离只有5px，而不是10px；）由于这点实现的不同，可能会造成一些布局混乱的情况发生。
对于指定position的元素，不管是relative还是absolute也是跨浏览器支持比较头疼的事情，原文作者说不讨论了，那我也不讨论了，呵呵

( 其实，这里有两个大小：一个大小是元素的可视大小，比如一个div他实际包含内容占据的大小，我们通常在CSS中制定的是这个大小，比如上面图中的400×400；另一个大小是浏览器布局引擎计算出来的该元素的实际占地大小，这个大小包括了元素的可视大小，还包括了你指定的padding阿、border阿、margin阿，加起来才是你的实际占地大小，浏览器按照这个大小来给你划出属于这个元素的区域。举个例子就是，我要盖房子，需要使用面积为120平米的，但是开放商就需要给你添加围墙多厚、公摊面积、跟其他人家之间的间距阿什么的，所以最后你实际购买的面积肯定不止120平米，道理是一样的，呵呵。)

Block和Inline型元素

( 我也不知道block level和inline level是不是应该把level翻译成“型”阿，呵呵 )

HTML的元素生下来不是平等的，他们被分为两类，block型和inline型。block型的元素生下来就优越，人家生下来就能占据属于自己的一块地皮，他的父亲占的地方有多大，除去围墙内边距啥的，他就能占多大地方，这类元素包括div阿p阿等等；还有一类元素是inline型的，他们生下来没有属于自己的地方，他自己多大，他就占多大地方，然后跟着所有的文字阿或者其他inline元素挤在一起，这类元素包括span阿a阿啥的。

下面几条描述了基本的不平等地方：

Block元素如果没有指定任何长宽规则的话，缺省的是在水平方向上填充满父级容器水平方向的空间，所以不需要制定说width为100%；
如果没有指定浮动或者position的话，Block元素默认起始于父级容器的最左边界，然后安排在前面还有的block元素下面
inline元素会自动忽略width和height，写了也没用
inline元素同文字一起被布局和渲染，他的大小会随着一些字体方面的属性而发生变化，例如white-space、font-size、lettering-spacing等
inline元素可以使用vertical-align来进行竖直方向的对齐，但是block元素不行
如果指定inline元素为浮动的话，他就变成block型的了

补充一点就是，这些特性是针对html元素的天生而言的，但是不妨碍后天给他指定，可以通过display: block;来指定a或者span成为block型元素，同时还有好多效果可以利用display: inline-block;这样的方式做到，等等。

理解浮动和Clear

现在多栏的布局越来越常见，实现多栏布局中比较简单并且容易维护的方式就是通过浮动。浮动元素可以指定浮动的方向，是向左还是向右，这些元素会自动按照这个方向顺序摆放，直到“碰到”容器元素的边界或者其他的浮动元素，这时可能就会折行重新开始浮动等。所有非浮动的、inline的内容会围绕着这个浮动元素来进行布局。

浮动的元素不会参与到其他非浮动的block元素的布局计算中，也就是说，如果你把一个盒子浮动在左边，跟着他有一个非浮动的block段落，这个block会装作好像没有前面那个浮动元素一样计算布局，该多大还多大，上下左右坐标该怎么计算还怎么计算，但是这个block里面的文字——inline内容会围绕着这个浮动盒子来进行布局；（可能说起来比较拗口，有兴趣的可以自己写段HTML代码就明白了。）
要让内容能够围绕一个浮动元素布局的话，那这段内容要么是inline型的，要么就得跟这个浮动元素在同一个方向上浮动，比如都是向左或者都是向右
浮动元素如果没有指定宽度的话，他的宽度会默认的缩小到内部内容的大小，所以最好为你的浮动元素指定一个宽度
当block元素包含float元素的时候，一定小心布局的变化，外层元素会collapse
具有“clear”属性的元素可以不在围绕前面的浮动元素——视为取消浮动的原则

理解IE的常见问题

IE6目前还在网络中占有很大一部分市场，虽然开始有大的网站开始不支持IE6的行动，但是有时候还是需要花费很大精力来照顾一下IE一族的感受。这里有一些需要处理的最为常见的问题：

如果过渡使用浮动的话，IE6会是一个很大的问题，会造成内容消失、重复文字等等
IE6会把浮动元素浮动方向那边的外边距乘以2，把浮动设定为display: inline通常会解决这个问题
IE6不支持max-和min-系列的CSS规则，例如max-height等
IE6不支持指定位置的背景图片
IE6和IE7不支持display很多属性值，例如inline-table等
IE6中，出了对于使用:hover以外，其他元素都不能用
不同版本的IE对于CSS Selector的支持是不同的
IE6-8对于CSS3的特性支持不多

有些问题怎么调也不可能一样

有些事情开发人员怎么调整可能都是不行的，这时候也别太较真了，比如：

Forms表单可能怎么都会看着不一样的
字体

使用CSS Reset

原文作者说自从他开始使用CSS Reset之后，就爱上了CSS Reset。通过CSS Reset，书写跨浏览器CSS代码的能力大大加强。CSS Reset看上去可能是一堆很没用的代码，不过真的很有用，原文作者推荐Eric Meyer的CSS Reset代码。

( 啥是CSS Reset？我们知道对于HTML元素进行CSS的限定规则有很多很多，开发人员不可能对于一个div写特别长的CSS 规则代码，把所有的规则全部配置一遍，那要累死了，所以对于没有设定的属性，所有的浏览器都有默认的样式属性。比如你的页面中没有指定font，那浏览器怎么办，会用他默认的样式中的字体来对网页进行渲染，在比如，我们上来就可以写

这样的元素，之后可以看到

直接就有了一些关于内外边距的一些样式，这些样式都是浏览器添加的默认样式。这当然非常非常的方便，但是同样会带来一个问题就是每个浏览器内置的默认样式都不一样阿，尤其是涉及到内外边距这些实际影响布局的属性，所以，在这样的背景下，CSS Reset就出现了。下面这个图就是一个典型的Reset代码段。)

( CSS Reset不是什么特别的概念，核心思想就是为了消除不同浏览器缺省样式属性带来的不兼容性。可以看到的是貌似Reset就是把内外边距什么的重新清零一遍，这是因为这些默认内外边距的不同是带来布局不同最大的问题之一。)

基本就翻译到这里吧，通过翻译自己也学习到了很多，整理出来希望能够帮助更多的朋友理解这些。我的实战经验不多，不过上述的问题基本也都遇到过，可能也能说明这些问题比较具有代表性。如果有任何错误和意见，欢迎批评指正。

来自: http://www.mijia.org/blog

分享到：

9
顶

0
踩

评论共 4 条请登录后发表评论

4 楼 hehebaiy 2012-06-05 16:42

翻译的不错哈~

3 楼 xmlovedoudou 2010-06-12 08:41

•如果指定inline元素为浮动的话，他就变成block型的了
说真的，这句话我可不敢认同啊。任何被设为浮动的元素拥有了块级（level翻译为“级”）元素的特性，但是与块级元素有区别的两点是：
1.设为浮动的元素脱离了正常文档流，未设的块级元素(不包括绝对定位)则处于正常文档流中；
2.块级元素独占一行，浮动元素很随意啊。

2 楼 xmlovedoudou 2010-06-12 08:32

•对于指定position的元素，不管是relative还是absolute也是跨浏览器支持比较头疼的事情，原文作者说不讨论了，那我也不讨论了，呵呵。
其实这个跨浏览器并不难，问题是带了内填充的ie6在定位上有问题。

1 楼 xmlovedoudou 2010-06-12 08:30

•如果没有指定元素宽度的话，非浮动元素会自动撑开去适合父元素的宽度-父元素的内边距padding
这句话有问题，如果没有指定元素宽度的话，非浮动元素会自动撑开去适合父元素的宽度，本该说到这里就结束的，结果后边又冒出减去父元素的内填充，多此一举。

发表评论

您还没有登录,请您登录后再发表评论

9顶0踩