前端兼容性问题解决方案

（1）CSS浏览器的兼容问题，比如设置元素透明度，不同浏览器的实现方式如下：

//IE浏览器使用滤镜实现
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)
//非IE浏览器
opacity:0.5

解决方案:现在的前端开发已经出现了非常多的框架和类库用于浏览器的兼容问题，比如最常见的jQuery类库，解决获取元素中包含的所有文本内容兼容性问题，可以使用以下语法：

$('#element').text('element text');

（2）CSS书写样式的兼容性问题
平常在书写样式表时，若要使用CSS 3中的各种特效，都需要加上各种前缀让不同的浏览器得以支持，如实现一个圆角效果代码如下

boder-radius:3px;           /*圆角，水平半径为3px*/
-moz-border-radius:3-x;     /*Firefox浏览器*/
-webkit-boder-radius:3px;   /*WebKit核心浏览器*/
-o-border-radius:3px;       /*Opera浏览器*/

解决方案：推荐一个非常流行的解决方案，使用Less CSS Framework解决书写样式的兼容性问题，以下描述摘自官网：

LESS将CSS赋予了动态语言的特性，如变量、继承、运算、函数。LESS既可以在客户端上运行（支持IE6+,Webkit,Firefork)，也可以借助Node.js或者Rhino在服务器端运行。

（3）检测浏览器是否支持CSS3和HTML5
常见的安全检测手段有4种，如下：

检查全局对象，如window、navigator是否拥有指定属性，如离线存储、地理位置信息等HTML 5新特性
通过创建新元素，检查元素对象上是否拥有指定的HTML 5属性，如Canvas等
通过创建新元素，检查元素对象上是否拥有指定的HTML 5方法，同时调用该方法，并判断返回值，如检查video元素支持的视频格式
通过创建新元素，设置元素对象上的HTML5指定属性值，并判断设定后的值是否被保留。

可见，检测HTML 5特性需要熟知各种情况，这并非是一件简单的事。可通过第三方库检测HMTL5，如最热门的Modernizr库。
Modernizr是一个用JavaScript编写的开源类库，用于检测浏览器是否支持CSS 3和HTML 5的新功能。Modernizer库比传统的通过浏览器的UserAgent获取浏览器版本信息判断特性支持的方法更可靠，检测结束后将判断结果存储在Modernizr对象上，使用者可以通过获取Modernizr对象上的信息判断浏览器对CSS 3或者HTML 5的支持情况
使用Modernizr类库可以前往官网下载，地址为https://modernizr.com或者http://modernizr.cn/.进入development下载页面，可以发现Modernizr提供了各类属性检查的选择项，使得开发者可以按照自身的需求下载应用包的最小集。

（4）CSS 3浏览器前缀问题
浏览器厂商会预先支持还处在草案状态下的CSS属性，为了做区分所以在样式名前加上各自的前缀。目前常用的前缀有-webkit、-moz、-ms、-o。假如在项目中想使用最新的CSS 3属性，又不想写那么多前缀，可以使用一个JavaScripte的姐解决方案，该项目地址为https://github.com/LeaVerou/prefixfree 。

前端兼容性问题解决方案相关推荐

前端兼容性问题解决方案（二）
IE6IE7Firefox浏览器不兼容原因及解决办法一.IE6IE7Firefox浏览器不兼容原因及解决办法 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下 ...
我所碰到的面试题之------前端常见浏览器兼容性问题解决方案---
我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- 参考文章: (1)我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- (2)https://www.cnblog ...
9种常见的前端跨域解决方案
9种常见的前端跨域解决方案(详解) 2019.09.02 21:54 73879浏览一.什么是跨域? 在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制. ...
浏览器兼容性问题解决方案之CSS，已在IE、FF、Chrome测试
最近在跟一个同学共同整理一个关于浏览器兼容性问题的文档,我们主要是找出在主流浏览器中出现哪些问题,如何解决这个问题,并给出实例.在这之前,需要明白一下几个问题. 什么是浏览器兼容问题? 所谓的浏览器兼 ...
前端异常监控解决方案研究
摘要: 异常监控不复杂也不简单啊... 原文:前端异常监控解决方案研究作者:frustigor 前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系 ...
CSS HACK：IE6、IE7、IE8、Firefox兼容性问题解决方案
CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案参考文章: (1)CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案 (2)https://www. ...
基于webpack的前端工程化开发解决方案探索（一）：动态生成HTML
基于webpack的前端工程化开发解决方案探索(一):动态生成HTML 参考文章: (1)基于webpack的前端工程化开发解决方案探索(一):动态生成HTML (2)https://www.cnbl ...
JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
Xilinx的ISE14.7和PlanAhead与win10系统的兼容性问题解决方案
今天在新电脑的win10系统上安装ISE14.7时,遇到安装后无法打开的情况,解决方案主要参考以下: http://www.eevblog.com/forum/microcontrollers/gui ...

前端兼容性问题解决方案

前端兼容性问题解决方案相关推荐

最新文章

热门文章