CSS跨浏览器开发原则[图文教程]
在互联网设计过程中,可以说没有什么比开发出一个能够在当前所有浏览器下都具有同样吸引眼球效果的设计更让人高兴的事了。遗憾的是,这个目标似乎都被普遍认定为不太可能实现。甚至有些人抛弃了对完美的追求,认为跨浏览器的兼容性并不是必备的。
虽然我也同意每个项目都实现浏览器的完全兼容性,即所有web浏览器(暂且不考虑手机浏览器)用户都能体验相同的完美设计效果是永远都不可能的,但是,我相信大多数情况下近乎完全兼容性却是可以实现的。作为开发人员,我们的目标不应该仅仅停留在让项目在每个浏览器都能运作,而应该尽可能用最少的代码让项目在每个浏览器中都能实现尽善尽美,让今后网站的维护更加轻松。 这篇文章将向大家介绍一些最为重要的CSS 开发原则和技巧,希望能够帮助前端开发的新手和老生用最少的CSS代码实现跨浏览器体验的一致性。 CSS盒模型( Box Model)CSS盒模型是网页布局的基础,如果你想要实现跨浏览器布局的一致性,这是第一个必需透彻学习的对象。好在,它并不难掌握而且通常在所有浏览器上的效果都是一样的,除了某些情况下会与IE的版本相关(这个后面会详细谈到)。 CSS盒模型负责计算:
CSS盒模型的基本规则如下:
关于块级元素,需要切记以下几个要点:
在Firefox中使用Firebug显示的盒模型( box model ) 块级元素Block和内联元素 Inline的区别经验丰富的开发人员可能觉得这没什么好说的,不过,我觉得这个一个非常重要的问题,要是能够做到透彻理解,你就会说“啊,原来如此” 很多头疼的问题就会迎刃而解,以后对创建跨浏览器布局信心也会大大增强。 下面的图片说明了块级元素block和内联元素inlin的区别:
|