html padding兼容,CSS居中兼容所有浏览器及padding问题解决

一,前言

这不是一篇css的入门教程,关于css的基本特性,请参考：

Css的优点很多,首先可以使html代码清晰明了,不会有太多的标签,然后css可以节省网络流量,因为你的css文件只需要下载一次就可以永久使用,以后用户请求你的网站的时候会直接从本地取css文件,不过这里也存在一个问题,那就是当你修改了css文件后,用户并察觉不到这种改变,需要手动刷新浏览器才能看到变化,一个解决办法就是每次更改css的时候都改一下css的文件名.css还有一个优点就是可以灵活控制布局,不像table布局那样麻烦,只需要简单的代码就可以实现流动布局和任意布局.

那css的缺点在哪里呢,不用说,跟JavaScript的兼容性一样,ie和ff等浏览器对这二者的某些元素都有着不同的解释方法,事实上ff浏览器和chrome浏览器是遵循的国际标准,而ie8虽然也改进了很多,但是大多数用户还停留在ie6阶段,在这个领域,不能图省事,在网页里提示"请用ie8或者ff浏览器浏览本站"是对用户的一种极大伤害,本来我们就是为了用户而存在,如果还要用户来适应我们,那是很不明智的.

二,绝对居中,任意排版?

在css的所有问题中,最让人头疼的就是页面绝对居中问题,因为所有浏览器对position和left等属性的解释不同,造成在ff浏览器里调通的页面在ie6里严重变形,其中原理涉及到ie6对块的解释和其他浏览器不同,这里不详细解释,只说解决办法.

直接上html,这是一段纯html代码,不包含任何布局的元素,标准的html都是这样编写的:

下面简单说明一下这些代码有何特点,使得能够兼容所有浏览器,绝对居中,而又可以任意布局。

提示：可修改后代码再运行!

首先注意body标签外边潜逃的

标签,这个是必须的,也是大家所熟悉的,这段代码的特殊之处其实在于#head,#nag2,#content标签的css属性:position,注意: 要再一个层里任意布局一个层,必须外嵌一个position为relative的层 ,在此html页面中包含三个大的部分,分别是头部,导航和正文,每个部分都是独立的,所以都外嵌一个层,然后设置position为relative,这样这三个层就会以流动的方式自动布局,而里面得层则可以分别在各自的区域里面自由布局,自由布局的position要设置为:absolute,然后分别设置left和top属性就可以任意布局了,left和top指的是相对于外边嵌套的层的位置,而不是相对于整个页面的位置.

至此其实就解决了所有问题,以后所有的层都写在外面的嵌套的层里面,这样写出来的html不仅清晰明了,而且布局简单,然后再说一个小问题:

三.Padding问题

在ff和ie里面对有个属性的解释也有差别,那就是padding,在ff里padding的意思是向层里面压缩指定的像素,而在ie里却是向外压缩指定的像素,造成层的表现不一致,而这又是一个非常常用的属性,那如何解决这个问题呢,正如我在nag2层里所使用的那样,我在nag2层里嵌套了一个小层,设置这个层的padding为10像素,然后隐藏这个层的显示,之后不管这个层是膨胀还是收缩,他的总体积总是变大的,在用户看来最后的效果都是实现了padding的效果,这是一个非常巧妙的办法,切实解决了此问题,其实还有一种类似hack的方法,那就是如果是单行的文字,可以通过设置 line-height来改变文字和层边界的距离,从而达到padding的效果.当时这个方法并不适合多行的情况。