网页设计与浏览器兼容问题及解决方法

　　对于网络开发者而言，为了给用户更好的上网体验，解决浏览器兼容问题依然是一个不小的挑战。而且网页设计是技术和艺术的组合，在设计师考虑到美观的同时还要考虑笔记本、平板电脑和手机兼容问题，网页设计已呈现新的发展趋势。

　　1 浏览器与网页兼容存在的问题

　　众所周知，上网的时候一般是通过浏览器来实现的，所谓的浏览器就是指能显示网页服务器或文件系统的HTML 文件内容，可以确保用户与该类文件进行交互。不同的浏览器之间的内核是不同的，这就导致同一网页在不同的浏览器中的效果出现差异，甚至不能够正常显示。目前一些网站的设计还没具备兼顾各种浏览器的能力，通过少数的浏览器打开网页时会出现变形、无法访问、显示不全和图片不动等现象。对于这种问题，网页开发人员把设计好的网站要放在不同的浏览器上检测其兼容性，对出现不同的情况要通过有针对性的方法来解决。

　　多数的网站设计人员采用CSS来展开布局进行设计的。目前，CSS3把CSS划分为不同的模块，功能也不断强大，网页设计也更加方便，不管是主流的门户网站还是各种小公司甚至个人的小站，也都是通过CSS进行展开设计的。曾经，IE占据了浏览器的主流地位，但随着互联网科技的不断发展，浏览器的各类呈井喷趋势，如搜狗、360极速、百度都在推出自己的浏览器，而且还占领了一大块市场份额，与此同时，谷歌、火狐、3435等浏览器也在市场上占有重要地位。各种不同的浏览器所使用的内核也是不同的，这导致很多网页浏览器不兼容，因为是浏览器的内核负责对网页语法进行解读并渲染网页。因此，浏览器的内核不同，对网页的语法解释也是不同的，同一个网页在不同的浏览器下的显示也是不同的，这就是我们所说的网站设计和浏览器的兼容性问题。如果网页和浏览器的兼容性问题处理不好，可能会导致浏览器对网页内容解读错误，出现乱码、变形、信息错乱等现象，影响页面的美观和使用。

　　2 几种网页与浏览器兼容问题的解决方法

　　2.1 采用Hack 技术实现浏览器的兼容性问题

　　所谓Hack 技术就是利用不同浏览器对CSS 样式支持不同的特点，针对不同浏览器分别重复定义多个不同的样式表，由浏览器各自解析执行自己支持的样式，从而设计出不同浏览器具有相同显示效果的页面。目前最常用的方法是利用浏览器对加入特殊字符的选择符或个别样式的支持、不支持重复定义不同的样式。对个别浏览器有特别显示效果的样式，如果个别浏览器有自己单独支持的隐藏样式，则先针对大多数浏览器定义通用样式，之后再用个别浏览器单独支持的隐藏样式重复定义该样式，使得大多数浏览器使用前者，个别浏览器用隐藏样式覆盖后单独使用后者。如果个别浏览器不支持大多数浏览器使用的样式，则先针对个别浏览器定义样式，之后再用个别浏览器不支持的样式为大多数浏览器重复定义该样式，使个别浏览器使用前者，大多数浏览器覆盖后使用后者。

　　2.2 不同浏览器页边距不一致问题

　　比如在CSS 中写一个margin— left ：588px，经过测试人们了现在IE8和火狐浏览器的显示效果民相同的，但IE6中显示就会出问题，主要表现就是页边距会相差几个像素，这就影响了网页的美观。这种现象产生的原因是不同的内核对网页的解读不同导致的，也就是渲染机制不同。不同的厂商对CSS的解释是有一定的差异的，同一个厂商不同的版本对此也可能出现不同的解释，正如上面讲到的IE7和IE8对同一问题的渲染是不同的。另外，浏览器和CSS和版本一直处于动态更新之中，这也是导致二者经常无法兼容的因素。对这一问题的解决可以对不同的浏览器书写不同的标准。例如：

　　#box{margin— left ：588px!important ;IE8 和火狐

　　*margin— left ：585px ;IE7

　　_margin— left ：582px ;IE6}

　　如此设计，所有浏览器的显示就会处于相同的状态。

　　2.3 IE6 对hover的不兼容性

　　在做网站设计时，设计师通常是用来实现不同级别菜单的设置的。在一些精致的网站中如果把鼠标箭头指向某个导航部位会让箭头显示hover效果。这种显示在IE7和IE8中是没有问题的，但通过IE6打开时会出现无法兼容的现象。如果IE6要达到这样效果就必须利用就javascript编写函数来协助完成。这需要创建一个hover.htc 文件，该文件使用js 脚本来定义元素的样式，如果检测到hover，就给元素设置onmouseout 和onmouseover 事件，从而实现hover的效果。如此以来，在IE6中运用hover就不会出现问题。

　　本文只是简单介绍几种解决网页和浏览器的兼容方法，随着网络技术的不断发展，浏览器和网页的不兼容问题可能会更加突出。要想从根本上解决这个问题，还要从浏览器的内核着手。只有不同的厂商使用统一的CSS标准，才能从根本上解决网页和浏览器的兼容问题。

• 0
• 0
• 0
• 0
• 0
• 0
• 0
• 0