一,前言
这不是一篇CSS的入门教程,关于CSS的基本特性,请参考：http://baike.lIEhuo.net/index.PHP?doc-vIEw-1645
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,#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的效果.当时这个方法并不适合多行的情况。
总结以上是内存溢出为你收集整理的CSS居中兼容所有浏览器及padding问题解决全部内容，希望文章能够帮你解决CSS居中兼容所有浏览器及padding问题解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）