前端兼容性问题解决方案

（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 。