浅谈浏览器兼容性CSS规则

发表于:2010/07/18, 属于分类: 网站建设, 本文作者: admin

每一个专业做网站的人都会知道,要加强用户体验,就要考虑到用户在什么平台下、什么浏览器下访问网站,在不同浏览器下访问网站的效果是什么?网站页面是不是正常,字符有没有混跌,边栏有没有被强制撑破,页面是不是有错位现象。如果你看到以下这样的网站,估计你会觉得这网站做得不行,那这家企业估计也不怎么样了。

萧山二中网站错位

上图是萧山二中网站在火狐下错位,但是在IE6下却显示正常,这是为什么?网站设计师对浏览器兼容性做得不够好,或者说根本忽视了浏览器兼容性的重要性。这是萧山网站建设存在的普遍问题。每当面对这个问题的时候,我很忧心,我认为,如果一个网页设计师长期如此不小心地建设一个网站,那么这种格局是无法改变过来的。如果连网站都做不好,更不用提及网站优化网站推广宣传了。

那么,如何去做好浏览器兼容性?

首先,改变网站设计的开发模式,table的兼容性的确很好,但是代码冗余,网站文件大的坏处可想而知。使用DIV+CSS模式,能从根本上改善这种情况。

第二,掌握了解css盒子模型
非常熟练地理解CSS盒子模型是最为重要的事情,CSS 盒子模型其实很简单,基本上,已经支持所有浏览器。
CSS 盒子模型包括以下事情:
该对象的边界,留白

盒子的尺寸和盒子与页面其它元素的相对位置

一个 blcok (区块)级对象占据多大的空间

CSS 盒子模型遵循以下准则:

区块对象都是矩形

width(宽), height(高), padding(内边距), borders(边框), 以及 margins(外边距) 决定

如果不设置宽度,一个非 float 型盒子水平上将充满其父容器(扣除父容器的留白)

如果不设置高度,该盒子的高度将自动适应其包含的内容,加上留白等(除非使用了 float)

处理 block 级对象时,必须注意以下事项:

垂直毗邻的 margin 会引起复杂的坍塌问题,导致布局问题(比如两个垂直毗邻的 Block 对象,上面的对象的 bottom-margin 为 40,下面的对象的 top-margin 为 20,则两个对象的间距将是 40,而不是 60 – 译者)

如果一个盒子的宽度设置为 100%,它就不能再设置 margins, padding, 和 borders,否则会撑破其父容器

拥有相对位置和绝对位置的对象,拥有不同的行为

第二:理解Floating和Clearing属性

实现多栏排版的最好方法是使用 float属性,float 也是一个将使你受益匪浅的属性。一个 float 对象可以居左或居右,一个设置为 float 的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的 float 对象的边界,而紧随其后的非 float 对象或内容,则包围在其相反的方向。

以下是使用 float 和 clear 属性的一些重要准则:

一个 float 对象,将从其置身的 block 级非 float 内容流中跳出,换句话说,如果你要将一个 box 向左边 float,它后面的 block 级非 float 对象会显示到下方,inline 级内容会在旁边包围

要让一段内容从一侧包围一个 float 对象,这段内容必须要么是 inline 级的,要么也设置为相同方向的 float

第三:理解block级和inline级对象的区别

Block级对象:

Block 级对象会自然地水平充满其父容器,因此没有必要为之设置 100% 宽度属性

Block 级对象的起始摆放位置是其父容器的左上边界,并顺排在其前面的兄弟 Block 对象的下方(除非设置 float 或绝对位置)

inline级对象

inline 级对象会忽略其宽度和高度设置

inline 级对象会随着文字排版,并受排版属性的影响(如 white-space, font-size, letter-spacing)

Inline 级对象可以使用 vertical-align 属性控制其垂直对齐,block 级对象不可以

Inline 级对象的下方会保留一些自然的空间,以适应字母 g 一类的会向下探出的笔画

一个设置为 float 的 inline 对象将变成 block 对象

最后:不要试图去追求每个浏览器页面下都能够一模一样,只要网页在不同浏览器下能够正常显示,不错位,用户感觉能够正常使用,就算达到效果。在此,推荐一个工具,IETester,模拟各种IE版本,包括IE5-IE9。希望每一个网页设计师,都能够把浏览器兼容性做好,认真地去思考用户体验。

发表评论