css userAgent (簡易瀏覽器區分)

來源:互聯網
上載者:User

通常為了相容多個瀏覽器,一般都要是用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/

執行個體下載:http://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>

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.