随着网络技术的不断发展,网络上的各种网站也在不断增加,内容更加丰富,功能更加强大。但对于网络开发者而言,为了给用户更好的上网体验,解决浏览器兼容问题依然是一个不小的挑战。而且网页设计是技术和艺术的组合,在设计师考虑到美观的同时还要考虑笔记本、平板电脑和手机兼容问题,网页设计已呈现新的发展趋势。
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的不兼容性
在做网站设计时,设计师通常是用<ul><li></li></ul> 来实现不同级别菜单的设置的。在一些精致的网站中如果把鼠标箭头指向某个导航部位会让箭头显示hover效果。这种显示在IE7和IE8中是没有问题的,但通过IE6打开时会出现无法兼容的现象。如果IE6要达到这样效果就必须利用就javascript编写函数来协助完成。这需要创建一个hover.htc 文件,该文件使用js 脚本来定义元素的样式,如果检测到hover,就给元素设置onmouseout 和onmouseover 事件,从而实现hover的效果。如此以来,在IE6中运用hover就不会出现问题。
3 结语
本文只是简单介绍几种解决网页和浏览器的兼容方法,随着网络技术的不断发展,浏览器和网页的不兼容问题可能会更加突出。
要想从根本上解决这个问题,还要从浏览器的内核着手。只有不同的厂商使用统一的CSS标准,才能从根本上解决网页和浏览器的兼容问题。
参考文献
[1]李灵华,李秀静。IE与Firefox 浏览器CSS 兼容性的解决方法[J].大连民族学院学报,2012(14)。
[2]巩恩伟。CSS 在浏览器中的兼容性及使用技巧[J].电脑知识与技术,2013(6)。
[3]汪可。网站前台代码浏览器存在的兼容性问题及对策研究[J].商情,2012(28)。
网页设计在视觉传达设计中表现形式可谓是多种多样,它不仅涵盖了平面设计的传统优缺点,还具备了在融媒体时代的便捷性和个性化,是一个相对综合要求较高的设计。...
从面前中国的教育变革,以及全球范围内的教育方式变迁情形来看,未来的教育结构中远程教育所占有的比例势必会越来越重。在远程教育的模式中,网页课堂教育视频的质量关系着学生的课堂学习质量。网页中的模拟教师动态性表达效果,以及其声音、动作之间的同步...
远看色,近看花,七分颜色三分花。色彩为网页提供了最有效的表述语言,同时也是最重要的表现方式,色彩是网页之魂。20世纪90年代,互联网兴起,网页设计随之发展起来。早期网络的带宽很有限,因而网页上多为对纯文本的编辑,图片很少,彩图更少。在色彩搭配...
一、前言目前我们处于一个互联网极度盛行的时代,而网站则被各大公司视为争夺利益高地的第一战场,网页设计的重视程度被前所未有的抬高并作为自我展示平台的核心。在网站页面设计这一方面,优秀的设计师可以充分利用用户的使用习惯来为自己的企业形象增光添...
1骆驼服饰旗舰店总体说明1.1骆驼服饰旗舰店网页设计的总体规划网页设计是通过很多的设计领域启迪、顺应时代要求而产生的一门新的艺术设计类型,它既有与传统的设计艺术相同的美学规律,又有其自己的特色,具有相同的智慧和激情的表达方式,它是需要用头...
摘要现今社会,Internet网已将全球联通,信息的共享和交流已经成为人类的共同需求,网络作为高科技与信息交互式媒介的产物,成为人类生活中不可或缺的重要连接纽带。信息的传播和获取已是国家、企业甚至个人发展充实的必要手段。统计显示,人们通过Intern...
1.引言目前家家户户都被互联网连在一起,不仅仅是公司,有很多个人都简历了自己的网站。各有各的用途,公司用于展示自己的产品,个人用于交流,展现自我等。但是大家都没有考虑过这样一个问题,我们现在使用的这个网页,它的结构是什么,怎么才能最大的优化...
结论多数人在确定某个网站的设计是好还是坏的时候,有两种标准。从严格的可用性角度来说,这种判断集中于功能性,信息呈现的有效性及效率。还有一种是纯美学的角度,这是关于设计的美学价值和视觉吸引力的。有些人沉迷于美学和图像中,而忘记了用户,而...
第1章引言1.1选题的背景在互联网充斥着人们生活方方面面的今天,伴随着良莠不齐的网站的暴增,浏览网页成了人们获取外界信息的主要方式。各大网站为了吸引大量用户访问,增加人气,从而带来可观的流量和收益,也是卯足了劲,纷纷标新立异,展现给用户...
互联网已然成为人们生活中重要的部分。网页作为互联网的信息传播的主要媒介, 其所含内容、网页布局和风格具有影响着人们的视觉感受和审美品位的作用。...