网页设计中浏览器兼容性成因及具体问题分析
浏览器内核对网页解析不一致主要体现在设计人员的代码书写不规范，以下是小编搜集整理的一篇探究浏览器兼容性产生原因的论文范文，欢迎阅读查看。
随着时代的发展，互联网已经成为大家生活中重要的一部分，截止到2014年6月，网民人数达到6.32亿，网站的发展也日益上升，主流的浏览器主要包括Firefox、Opera、chrome、IE、safari等，不同的浏览器使用的浏览器内核不一样，导致不同浏览器对网页的解析不一致，因此导致网页展示出现差异，例如出现排版不正确、字体大小不一致、图片展示有差异等，这被称为“浏览器兼容性”[1].因此，网站开发者不断研究网页标准，让用户可以在任意浏览器中浏览同一个页面达到一样的效果。
1国内外研究和发展概况
在众多品牌的浏览器中，使用比例较高的是：IE、GoogleChrome、Safari、Opera、Firefox;在国内外，都没有能解决网站兼容性的方法和工具，开发人员一般是针对不同的兼容性问题使用不同的解决办法。一般通过使用CSS样式控制，以及脚本判断浏览器的品牌及版本，并赋予该浏览器的样式控制或是脚本控制，使同个页面在不同浏览器显示一样的效果。
2浏览器兼容性产生原因
在版面设计中，产生浏览器兼容性问题的主要原因是不同浏览器内核和不同浏览器版本对网页代码解析不一致，例如浏览器对HTML、CSS属性的支持不一致;对脚本语言的支持不一致;网页设计人员编写规范存在问题，不符合W3C标准;以及用户使用的设备分辨率不一致，容易产生网页错位，元素显示不全，图片显示不一致等问题。
3浏览器兼容性问题具体分析
浏览器内核不一致，使浏览器对网页的CSS解析不一致，从而导致网页在某些浏览器中出现排版不正确、图片显示不完整等一系列兼容性问题。目前市场上主要浏览器内核为：
(1)IE6/7/8/9/10,360安全浏览器、360极速浏览器、遨游浏览器、世界之窗浏览器、SOGOU浏览器主要使用Trident内核。
(2)MozillaFirefox使用Gecko内核。
(3)Applesafari、GoogleChrome,遨游3,Opera浏览器使用WEBKIT内核。
(4)Chrome(28及往后版本)、Opera(15及往后版本)和YANDEX浏览器使用Blink内核。
3.1浏览器内核对网页解析不一致具体问题分析
浏览器内核对网页解析不一致主要体现在设计人员的代码书写不规范，书写不规范主要体现在CSS括号问题;属性和值用等号连接;在左大括号前多一个“,”;以及使用!important声明没“;”.
3.1.1CSS括号问题
关于左右大括号书写情况主要有以下几种：
(1)CSS的多余右括号：IE7以下版本的IE浏览器，浏览器会忽略多余的右括号，选择器解析正常。IE8以上的版本包括IE8/Firefox/Chrome/Safari/Opera,CSS多余的右括号会导致下一个选择器无法正常解析，如图2的CSS代码“,.red”出现多余的右括号，则图3IE7以下版本显示正常，图4IE8以上版本及Firefox/Chrome/Safari/Opera等浏览器会导致下一个选择器无法正常解析。
(2)未闭合的大括号。如图5所示代码，IE5.5浏览器可以会找到最相近的闭合右括号，导致第二个选择器解析错误，以下的.选择器解析正常。
在IE6以上版和Firefox、Chrome、Safari、Opera中，浏览器会以最后一个选择器的闭合右括号，导致只有第一个选择器解析正常，其他都解析错误。
(3)多余的左括号。IE7以下版本，未闭合的左大括号会把CSS中最后一个声明的CSS右括号作为结束的括号。而中间的内容：
“{background-color:red;}.yellow{background-color:yellow;}.
blue{background-color:blue;”会被浏览器解析为错误的声明。
(4)多余的左括号位于选择器前面。IE5.5浏览器会解析为左大括号会跟后面的选择器连在一起，导致该选择器出错，但是不影响浏览器对下面选择器的解析。
在Opera、Firefox、Safari、IE6版本以上、Chrome等浏览器则认为左大括号把最后一个右大括号作为结束符号，是一个声明块。
3.1.2属性和值用等号连接
实验演示结果如下图6的代码，IE5.5浏览器会直接把等号解析为规范的CSS符号“:”,所以该符号解析为正常，如图7.
IE6以上版本浏览器会解析为那是错误的CSS声明，导致浏览器直接忽略该属性，选择器值失效为空，如图8.
3.1.3在左大括号前多一个“,”.
代码如图9,第一种情况浏览器直接忽略“,”,所以选择器解析正常。
第二种情况浏览器会把该选择器解析为失效。
3.1.4使用!important声明没“;”.
IE7浏览器会正常解释第一个!important,IE8只可以解释最后一个!important,Firefox、safari、chrome、opera会解析为错误的代码;实验结果如图10,图11,图12.
3.2像素问题
(1)浏览器对含小数值的像素解析不一致。每一个浏览器对于含小数值的像素解析都存在不一致的地方。例如11.8px,Firefox/GoogleChrome/Opera/IE8取值为12px;IE6/7/Safari会取值为11px;IE9以上的版本会直接解析为11.8px;在做网页兼容的时候，要是遇到在IE6/7/safari中设置文字大小为11px;可以使用该方法，直接把文字大小设置为11.8就可以达到目的了。这样还可以省下一个CSSHACK.(2)PX、EM和REM的使用对网页版面的影响。PX是绝对单位，而EM是相对单位，在设置字体大小的时候，最好使用EM;当用IE调整网页自由缩放的时候，PX不会做出任何的反应，而EM则可以随着页面的缩放而缩放，默认的1em=16px;而EM是相对值，会继承其父级元素的字体大小，如果全局变量中设置了“body{font-size:12px;}”;则1em=12px;而REM是一个CSS3新增的一个相对单位，REM就是根EM,REM是相对于HTML的根元素，只要调整根元素的大小就可以调整一个页面的字体大小，并且该属性IE8以上的版本都可识别，包括其他浏览器都能支持，如果不能支持，则可以使用P{font-size:12px;font-size:2rem;}.
3.3DOCTYPE(文档类型)影响CSS解析
IE依靠DOCTYPE判断一个网页该按什么标准渲染，渲染的意思是浏览器对网页进行排版，文档类型声明引用DTD(文档类型定义)，文档类型声明会告诉浏览器该采取什么标准读取该网页。
HTML有多个版本，HTML、HTML+、HTML2.0、HTML3.2、HTML4.01、HTML1.0、HTML5、XHTML5,在每个版本中，文档声明都存在不一致，总结如下：(1)HTML4.01Strict--包含所有HTML元素和属性，但不包括展示性的和弃用的元素(比如font)并且不允许框架集(Framesets)。
(2)HTML4.01Transitional--包含所有HTML元素和属性，包括展示性的和弃用的元素(比如font)并且不允许框架集(Framesets)。(3)HTML4.01Frame-set--包含所有HTML元素和属性，包括展示性的和弃用的元素(比如font)并且允许使用框架集(Framesets)。(4)XHTML1.0Strict--与HTML4.01Strict一致，但必须以正确的XML格式编写标记。(5)XHTML1.0Transitional---与HTML4.01Transitional-一致，但必须以正确的XML格式编写标记。(6)XHTML1.0Framesets--与HTML4.0Transi-tional一致，但可使用框架集。文档类型不正确就会导致无法正确读取相应的HTML和CSS,导致网页出现兼容性问题。
3.4浮动元素对容器的影响
(1)设置Height导致的问题。Firefox设置height就不会使内容被撑大，但是IE设置height会导致内容撑大，导致height失效，所以最好不要设置height.(2)内容横向上撑破容器问题。如果含float属性的容器未定义宽度，内容会横向撑开容器宽度，IE会把内容拆行，所以内容容易撑破浮动容器的需要定义宽度。
4结语
本文具体分析了浏览器不同内核不同版本对网页解析不同而存在的兼容性问题，包括网页设计人员代码编写不规范，版面设计中像素的使用问题，文档类型影响浏览器对CSS解析，浮动元素对版面布局的影响等，对网页设计具有一定的参考意义，也为网站开发人员寻找更好的方法解决兼容性问题提供帮助。(图略)
参考文献
[1]李烨.别具光芒CSS属性.浏览器兼容与网页布局[M].人民邮电出版社，2008.
[2]刘增杰，史艳艳，刘玉萍.精通HTML+CSS网页布局与样式[M].清华大学出版社，2013.
[3]高洪涛.HTML+CSS网站开发兵书[M].电子工业出版社，2013.
[4](美)达科特(DUCKETT,J).HTML&CSS设计与构建网站[M].清华大学出版社，2013.
【网页设计中浏览器兼容性成因及具体问题分析】相关文章：