网页版面设计中浏览器兼容性问题分析.docVIP

网页版面设计中浏览器兼容性问题分析 　　摘要：随着互联网的不断发展，市场上产生了许多不同内核的浏览器，导致网页设计人员在进行页面设计时，出现各种关于浏览器兼容性问题，例如图片显示不正常、网页排版错位、部分功能或特效无法实现等。本文主要论述市场上主要运用的浏览器，分析其内核的构成，通过内核不一样产生了哪些版面的兼容性问题，并通过实验测试解决问题，使同一个网页在不同浏览器依然显示一致，提高用户体验。 中国论文网 /8/view-7181941.htm 　　关键词：浏览器 兼容性 浏览器内核 用户体验 　　中图分类号：TP393.092 文献标识码：A 文章编号：1007-9416（2015）12-0000-00 　　随着时代的发展，互联网已经成为大家生活中重要的一部分，截止到2014年6月，网民人数达到6.32亿，网站的发展也日益上升，主流的浏览器主要包括Firefox、Opera、chrome、IE、safari等，不同的浏览器使用的浏览器内核不一样，导致不同浏览器对网页的解析不一致，因此导致网页展示出现差异，例如出现排版不正确、字体大小不一致、图片展示有差异等，这被称为“浏览器兼容性”[1]。因此，网站开发者不断研究网页标准，让用户可以在任意浏览器中浏览同一个页面达到一样的效果。 　　1 国内外研究和发展概况 　　在众多品牌的浏览器中，使用比例较高的是：IE、Google Chrome、Safari、Opera、Firefox；在国内外，都没有能解决网站兼容性的方法和工具，开发人员一般是针对不同的兼容性问题使用不同的解决办法。一般通过使用CSS样式控制，以及脚本判断浏览器的品牌及版本，并赋予该浏览器的样式控制或是脚本控制，使同个页面在不同浏览器显示一样的效果。 　　2 浏览器兼容性产生原因 　　在版面设计中，产生浏览器兼容性问题的主要原因是不同浏览器内核和不同浏览器版本对网页代码解析不一致，例如浏览器对HTML、CSS属性的支持不一致；对脚本语言的支持不一致；网页设计人员编写规范存在问题，不符合W3C标准；以及用户使用的设备分辨率不一致，容易产生网页错位，元素显示不全，图片显示不一致等问题。 　　3 浏览器兼容性问题具体分析 　　浏览器内核不一致，使浏览器对网页的CSS解析不一致，从而导致网页在某些浏览器中出现排版不正确、图片显示不完整等一系列兼容性问题。目前市场上主要浏览器内核为： 　　（1）IE6/7/8/9/10，360安全浏览器、360极速浏览器、遨游浏览器、世界之窗浏览器、SOGOU浏览器主要使用Trident内核。 　　（2）Mozilla Firefox使用Gecko内核。 　　（3）Apple safari、Google Chrome，遨游3，Opera浏览器使用WEBKIT内核。 　　（4）Chrome（28及往后版本）、Opera（15及往后版本）和YANDEX浏览器使用Blink内核。 　　主要浏览器对CSS综合性能测试结果如图1所示。 　　图1 主流浏览器各版本的CSS性能综合测试（源自：开源中国网） 　　3.1 浏览器内核对网页解析不一致具体问题分析 　　浏览器内核对网页解析不一致主要体现在设计人员的代码书写不规范，书写不规范主要体现在CSS括号问题；属性和值用等号连接；在左大括号前多一个“，”；以及使用！important声明没“；”。 　　3.1.1 CSS括号问题 　　关于左右大括号书写情况主要有以下几种： 　　（1）CSS的多余右括号：IE7以下版本的IE浏览器，浏览器会忽略多余的右括号，选择器解析正常。IE8以上的版本包括IE8/Firefox/Chrome/Safari/Opera，CSS多余的右括号会导致下一个选择器无法正常解析，如图2的CSS代码，“.red”出现多余的右括号，则图3IE7以下版本显示正常，图4 IE8以上版本及Firefox/Chrome/Safari/Opera等浏览器会导致下一个选择器无法正常解析。 　　`图2 CSS多余右括号 图3 IE7版本以下的IE浏览器的测试结果 　　图4 IE8以上的版本的测试结果 图5未闭合的大括号案例代码 　　（2）未闭合的大括号。如图5所示代码，IE5.5浏览器可以会找到最相近的闭合右括号，导致第二个选择器解析错误，以下的选择器解析正常。 　　在IE6以上版和Firefox、Chrome、Safari、Opera中，浏览器会以最后一个选择器的闭合右括号，导致只有第一个选择器解析正常，其他都解析错误。 　　（3）多余的左括号。IE7以下版本，未闭合的左大括号会把CSS中最后一个声明的CSS右括号作为结束的括号。而中间的内容：“{background-color：red；}.yello