探究浏览器兼容性问题及解决方案-论文.pdf

《探究浏览器兼容性问题及解决方案-论文.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、技术研发TECHN0L0GYANDMARKET探究浏览器兼容性问题及解决方案党长青(唐山学院电子信息系，河北唐山063020)摘要：浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。关键词：浏览器；兼容性；方案doi：10．3969／j．issn．1006—8554．2014．08．135O引言1)通常采用Hack技术实现浏览器的兼容性问题。所谓随着Firefox，Chrome，Safari，Opera，36

2、0等浏览器的出现，Hack技术就是利用不同浏览器对CSS样式支持不同的特点，结束了IE雄霸天下的日子。浏览器厂商为了取得更多的市场针对不同浏览器分别重复定义多个不同的样式表，由浏览器各份额，会促使各浏览器更符合W3C标准，并且不同浏览器的扩自解析执行自己支持的样式，从而设计出不同浏览器具有相同展功能对W3C标准起到了推进作用。然而对开发者来说也同显示效果的页面。时带来了新的问题，因为多个浏览器同时存在，这些浏览器在目前最常用的方法是利用浏览器对加入特殊字符的选择处理一个相同的页面时，表现有时会有差异。这种差异可能很符或个别样式的支持、不支持重复定义不同的样式

3、。小，甚至不会被注意到。也可能很大甚至造成在某个浏览器下对个别浏览器有特别显示效果的样式，如果个别浏览器有无法正常浏览。我们把引起这些差异的问题统称为浏览器兼自己单独支持的隐藏样式，则先针对大多数浏览器定义通用样容性问题。造成浏览器兼容性问题的根本原因就是各浏览器使式，之后再用个别浏览器单独支持的隐藏样式重复定义该样用了不同的内核，并且它们处理同一件事情的时候思路不同。式，使得大多数浏览器使用前者，个别浏览器用隐藏样式覆盖1浏览器兼容性问题后单独使用后者。如果个别浏览器不支持大多数浏览器使用从浏览器内核的角度来看，浏览器兼容性问题可分为以下的样式，则先针对个

4、别浏览器定义样式，之后再用个别浏览器三类。不支持的样式为大多数浏览器重复定义该样式，使个别浏览器1)渲染相关：和样式相关的问题，即体现在布局效果上的使用前者，大多数浏览器覆盖后使用后者。问题。如两个div元素嵌套时，如果内层子元素的区域大于外2)通过JavaScript解决常见浏览器兼容问题。还有另一个层父元素的区域，IE6及以下浏览器中父元素区域的设置失效解决办法是在开发过程中使用当前比较流行的JS，CSS框架，会增大区域自适应子元素，而在IE7以上及火狐等其他标准浏如jQuery，YUI等等，因为这些框架无论是底层的还是应用层览器中父元素区域的设置是不会

5、随子元素变化的。的一般都已经做好了浏览器兼容，可以放心使用。如用jQuery设置匹配高度。jQuery插件在同一个容器里div{margin：10px；text—align：center；l“平衡”盒子的高度并创造一个简介的网格——几乎从可用性#outfwidth：200px；height：100px；border：3pxsolid；}和性能的角度使用简单的JavaScript替代：equalHeights()函数#in{width：400px；height：100px；border：blue3pxdashed；)

6、测定一个容器里的所有同级元素同容器的高度，然后设置每个<／style>元素的最低高度为最高的元素的高度。equalHeights()通过循外层div元素环测定指定元素的最高级别的子节点，然后设置他们的最小高内层div元素<／div>度值为最高的元素的高度。<／div>3)虽然W3C指定了默认样式，但各个浏览器厂商对个别2)脚本相关：和脚本相关的问题，包括JavaScript和DOM、元素的默认样式仍有一定的差异，只有了解各种浏览器默认样BOM方面的问题。对于某些浏览器的功能方面的特性，也属式的区别，才能设计出

7、显示效果统一的页面，可以用以下几种于这一类。解决方法：3)其他类别：除以上两类问题外的功能性问题，一般是浏(1)CSS{margin：0；padding：0；}是最常见的也是最易解览器自身提供的功能，在内核层之上的。如造成浏览器兼容性决的一个浏览器边界问题。问题的常见原因是设计师写出了不规范的代码，不规范的代码(2)块属性标签float后，又有横行的margin情况下，在IE6会使不兼容现象更加突出。显示margin比设置的大，在float的标签样式控制中加入dis—