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

  关于网络开发者而言,为了给用户更好的上网体验,处置阅读器兼容效果依然是一个不小的应战。而且网页设计是技术和艺术的组合,在设计师思索到美观的同时还要思索笔记本、平板电脑和手机兼容效果,网页设计已出现新的开展趋向。

  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规范,才干从基本上处置网页和阅读器的兼容效果。

更多网站树立资讯请关注蜘蛛熊,如需转载请注明出处!

提供最优质的资源集合

立即查看 了解详情