翻译:跨浏览器CSS代码法则

翻译下一篇国外的文章:

目前,在web design行业我们很难在主流几个浏览器里做到显示完全一致的效果。有的还认为这种完美的兼容是没有必要的。

当然,我同意构建一个为每个用户每个浏览器考虑的方案(移动终端除外)是不会出现在每个我们遇到的项目上面的。但我相信一个能给出一个跨浏览器兼容方案。作为一个开发人员,我们的目标不只是为了让这个项目在每个浏览器上能跑;我们的目标是项目能兼容全部浏览器的同时,代码更加精简,未来更好维护。

在这片文章中,我会写到一些我认为很重要的CSS法则和贴士,帮助新手和老手开发出精炼高效的CSS代码。

了解CSS box 模式
如果你想写出比较少用到hack类的跨浏览器兼容CSS,这是第一个你必须掌握娴熟的。还好,box模式不是很难掌握,而且基本上很多浏览器的解析是一样的,除了万恶的IE6之类的……
cssbox
css的box模式是负责计算的:

  • 有多少空间被块元素占用
  • 是否有border, margin 重叠,或者溢出
  • box 大小
  • 在有些范围内,一个box 的相对定位

css的box模式基本规则:

  • box 都是方的!
  • 块状化(block)元素,的大小是由 width,height,padding,borders,margins 一起决定的
  • 如果块元素没有指定高度,那么他的高度是内容加上边距(除非有浮动情况)
  • 如果块元素的宽度没指定,那么一个没有浮动的块元素会扩展到父级宽度减去父级的padding

一些必须记住的块状化元素准则:

  • 如果一个box 指定宽度是100%。别去写margin padding border,否则会溢出的
  • 两个相邻的垂直margin,会搞出一些神奇问题(什么重合崩溃之类)
  • 相对定位,绝对定位是有差异的,这个后面章节再说

明白Block块状和Inline内联状容器的区别:

对于一个熟手来说,这另外一个显而易见无脑流的东西。然而,这也是另外一个很重要的领域。当完全了解后,就能容易开发出兼容浏览器的css代码。

下面的图片说明了block和inline元素的区别:

以下是一些区分两者的基本原则:

  • block 元素默认状态下是自动扩展到父级元素的大小,因此没有必要width:100%
  • block元素默认状态下是在父级元素里面的右边顶格排列的.并且低于以前的block元素.(除非是有浮动,和其他定位)
  • inline 元素会忽略 宽度高度设定
  • inline 元素 遵循text特性
  • inline 元素能用 垂直剧中,而block不能用
  • inline 元素有些自然空间留白,比如为了配合”g”这种字母下面的勾
  • 如果inline元素浮动,那么就变成了block元素

了解浮动和清楚浮动
对于多列的布局,最好的方法就是使用浮动。因此,了解浮动原理是另外一个实现跨浏览器css的重要部分。

一个浮动元素可以左浮动和右浮动,最后会浮动到他的父级边缘,或者另外一个浮动元素的边上。所有在浮动元素后出现的不浮动的,inline内容会围绕浮动元素。

这里有些需要记住的浮动和清楚浮动东西:

  • 一个 浮动对象,将会在一个 block 级非 float 元素后跳行,换句话说,如果你要将一个 box 向左边 float,它后面的 block 级非 float 对象会显示到下方,inline 级内容会在旁边包围
  • 要让一段内容从一侧包围一个 float 对象,这段内容必须要么是 inline 级的,要么也设置为相同方向的 float
  • 一个 float 对象,如果没有设置宽度,则会自动缩成其包含的内容的宽度,因此最好为 float 对象明确设置宽度
  • 如果一个 block 对象包含 float 子对象,会溢出
  • 一个设置了 clear 属性的对象,将不会包围其前面的 float 对象
  • 一个既设置了 clear 又设置了 float 属性的对象,只有 clear:left 属性生效,clear:right 不起作用

下面的内容,我不同意作者观点,所以不翻译了。

原始地址:http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/