博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

css userAgent (简易浏览器区分)

Posted on 2011-12-07 17:39  PHP-张工  阅读(1100)  评论(0编辑  收藏  举报

通常为了兼容多个浏览器,一般都要是用css hack。

#test{
    color:red; /* 所有浏览器都支持 */
    color:red !important;/* Firefox、IE7支持 */
    _color:red; /* IE6支持 */
    *color:red; /* IE6、IE7支持 */
    *+color:red; /* IE7支持 */
    color:red\9; /* IE6、IE7、IE8支持 */
    color:red\0; /* IE8支持 */
}

今天看 www.laiwang.com 时,发现他的HTML 的class属性中包含了如下信息。

ua-webkit ua-webkit-535 ua-webkit-535-2 ua-chrome ua-chrome-15 ua-chrome-15-0 ua-chrome-15-0-874 ua-chrome-15-0-874-121 js

查看它的JS发现是这个 cssua 实现的。

官方网址:http://cssuseragent.org/

原理就是使用JS给HTML添加包含浏览器信息的class。

这样在css中区分浏览器时,就可以如下:

.ua-chrome a
{
    color:red;
}

.ua-ie a
{

    color:blue;
}

国外还有个类似的实现 http://rafael.adm.br/css_browser_selector/

实例下载:https://files.cnblogs.com/zjfree/cssua.rar

 

另一个区分IE版本的办法

使用

<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

代替<html>