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

上图是萧山二中网站在火狐下错位，但是在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。希望每一个网页设计师，都能够把浏览器兼容性做好，认真地去思考用户体验。