谈谈网站制作过程中怎样更好兼容浏览器的问题

网站在上线前需要进行多次重复的测试，其中有一个很重要的步骤就是对各大浏览器的兼容性测试，每个客户使用的浏览器是不一样的，所以需要测试网站浏览器的兼容性，例如那几个常用的IE浏览器，360浏览器，火狐浏览器等要兼容。

如果一个网站无法保证这一点，那么不论是搜索引擎还是客户都不会对这个网站友好的。因此务必要在建网站的时候做好网页兼容性测试，确保网站可以运行顺利。下面天水网站制作小编针对客户端浏览器兼容性问题谈谈看法：

网站做好之后一般客户要求都需要兼容很多浏览器，如果网站做出来之后不能够兼容浏览器的话，当客户在用这种浏览器进行访问网站的时候一定会出现网站打开是变形的情况，如果关于网站兼容所有浏览器也会是设计师一个比较头疼的事情。

市面上浏览器有上百种之多，然而我们在进行浏览器兼容性测试时不可以将所有的浏览器都测试一遍，那样工作量是相当大的。我们只需选择几款主流的浏览器进行兼容测试即可。如IE浏览器、火狐浏览器、谷歌浏览器、苹果(Apple)Safari、等几款全球应用范围最广的浏览器进行测试。从理论上讲，完美兼容所有浏览器所有版本的网页设计，有可能存在，但为了兼容一些不常用的低版本浏览器，网页设计师需要付出几倍的努力去做浏览器的兼容调整工作。

常见的几种网页元素在浏览器中不兼容问题：

　　1、目标不居中

一般新手都爱出现这个问题，主要原因是对盒子模型不够理解，如果发现你的页面没有居中，基本上有两种情况：

a. 如果是在浏览器中没有居中，就是没盒子，就是要用一个大DIV把所有需要居中元素装起来，然后给盒子一个css样式margin:0 auto;

b. 如果想要盒子内的元素居中，必须定义盒子的绝对宽度,然后给盒子一个CSS样式text-align:center;

　　2、目标在不同浏览器上的位置不同

a. 首先不要去急着找hack,先看一下自己的代码有没有错误，DW里有一个“检查浏览器兼容性”功能特别实用;

b. 然后，尽量让目标的位置初始化，使之在所有浏览器都处在同一个位置，这个条件的前提是，不写hack，最后再一个方位一个方位调整。

　　3、目标与目标之间距离在各个浏览器上的区别

a. 给其中一个目标加背景颜色;

b. 观察背景色与另外一个目标的距离，查看是不是这个目标造成的距离问题

c. 如果不是上一个目标，那就给另外一个目标也加上背景颜色。

d. 这样很容易判断出那个目标造成的原因，就针对那个目标进行修改。

　　4、IE6兼容问题最多的一个，浮动问题

a. flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，解决方法：

只需要给这个DIV加一个样式：display:inline;

b. 布局的时候经常会遇到这种情况：发现有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现。

解决的办法：清除浮动，在设置过浮动的那个DIV下面加一个DIV，给个样式clear:both;如下

　　5、IE8兼容问题

ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了

　　6、 背景兼容问题

有的时候明明给一个DIV加了背景颜色或背景图片，但是却显示不出来或者显示不全。

解决办法：首先，有可能是DIV没有设置绝对高度。如果设置了宽度和高度还没有效果，那么给DIV一个样式display:block;(通常a:hover加背景的时候经常遇到)。

另外，如果高度必须要设置成自动的话，那么就给DIV一个样式overflow:hidden;

　　7、 IE7和Firefox兼容问题

很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好使，就是FF下有问题。

解决方法：height:100px;/*FF下显示100的高*/ +height:120px;/*IE678下显示120高*/

原理：FF不识别加过符号的属性，而IE识别。

另外，天水网站制作公司小编强烈建议大家去更新自己用的浏览器版本，浏览器之所以会不断推出新版本，肯定是新版本有各种可圈可点的好处和亮点，而且新版本的各种兼容性，拓展功能也更强，为了让你浏览网页的时候更舒适，请一定记得更新你的浏览器。当你浏览网页时发生变形，不妨先看看是不是自己的浏览器版本太低。