随笔 - 317, 文章 - 0, 评论 - 453, 阅读 - 114万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

css userAgent (简易浏览器区分)

Posted on   PHP-张工  阅读(1105)  评论(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>

 

编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
历史上的今天:
2010-12-07 JS获取客户端系统字体
2010-12-07 Flash 图片3D旋转
点击右上角即可分享
微信分享提示