Jquery 关于跨浏览器技巧

我有一个很棒的工具，可以让你在样式表中插入特定于浏览器的CSS

例如：

#foo {width: 100%; border: 12px solid white}
.opera #foo {width: 99%; border: 12px solid red}
.gecko #foo {width: 33%; border: 12px solid blue}

…你明白了

问题:

有没有类似的东西可以用来插入特定于浏览器的jQuery代码段，甚至是特定于浏览器的HTML？例如，（伪代码）：IF opera、fadeIn div#opera、IF webkit fadeIn div#webkit等

我正试图弄清楚如何制作，例如，一个只为Opera显示的弹出窗口，另一个只为Webkit显示的弹出窗口，等等

基本上，发布任何有助于针对特定浏览器的内容，因为我想了解我需要了解的一切。我正在寻找能让跨浏览器任务变得更容易的插件，而且我不太关心较旧的浏览器

更新：

以下是我正在使用的插件：

function css_browser_selector(u) {
var ua = u.toLowerCase(),
    is = function (t) {
        return ua.indexOf(t) > -1
    }, g = 'gecko',
    w = 'webkit',
    s = 'safari',
    o = 'opera',
    m = 'mobile',
    h = document.documentElement,
    b = [(!(/opera|webtv/i.test(ua)) && /msie\s(\d)/.test(ua)) ? ('ie ie' + RegExp.$1) : is('firefox/2') ? g + ' ff2' : is('firefox/3.5') ? g + ' ff3 ff3_5' : is('firefox/3.6') ? g + ' ff3 ff3_6' : is('firefox/3') ? g + ' ff3' : is('gecko/') ? g : is('opera') ? o + (/version\/(\d+)/.test(ua) ? ' ' + o + RegExp.$1 : (/opera(\s|\/)(\d+)/.test(ua) ? ' ' + o + RegExp.$2 : '')) : is('konqueror') ? 'konqueror' : is('blackberry') ? m + ' blackberry' : is('android') ? m + ' android' : is('chrome') ? w + ' chrome' : is('iron') ? w + ' iron' : is('applewebkit/') ? w + ' ' + s + (/version\/(\d+)/.test(ua) ? ' ' + s + RegExp.$1 : '') : is('mozilla/') ? g : '', is('j2me') ? m + ' j2me' : is('iphone') ? m + ' iphone' : is('ipod') ? m + ' ipod' : is('ipad') ? m + ' ipad' : is('mac') ? 'mac' : is('darwin') ? 'mac' : is('webtv') ? 'webtv' : is('win') ? 'win' + (is('windows nt 6.0') ? ' vista' : '') : is('freebsd') ? 'freebsd' : (is('x11') || is('linux')) ? 'linux' : '', 'js'];
c = b.join(' ');
h.className += ' ' + c;
return c;
};
css_browser_selector(navigator.userAgent);

---

似乎这个插件所做的只是将几个类附加到

html

标记中。要使用jQuery测试它们，可以执行以下操作

$html = $("html"); //cached for performance reasons
...

if( $html.is(".gecko") ){
  ...

。更好的是，看看这个插件是否还设置了一些可以直接使用的全局（或从全局范围可见）变量。很可能是这样

---

另外，当你想知道浏览器的功能时，请不要看浏览器是什么。功能检测，而不是浏览器检测（除非功能无法可靠检测，如DCoder所述）。该库可用于此目的。

您不应检测到浏览器。你应该检测特征。“我有一个很棒的jquery插件”愿意与我们分享吗？（是的。插件链接和代码本身添加到了原始帖子中。）我一直听到“你不应该检测到浏览器”和“使用Modernizer”，但我只是还没有准备好学习这些东西。我需要简单的快速修复。Modernizer算是一个简单的快速修复。只需包含并测试一个全局可见变量。当我查看源代码时，我看不到任何添加到html或body标记的类，但可能可以修改插件以实现此目的。@user1691389某些类需要添加到某个位置，插件才能工作。它似乎是

html

，根据这个例子：

html.gecko div#header{margin:1em；}

类被添加到样式表中。嗯，也许我可以自己在主体元素上添加类。如果你看插件页面的DOM，你会看到（例如）

，我大体上同意Modernizer的观点，但也有例外。个人经验中的一个例子是：当使用某种@font字体时，在屏幕上渲染是可以的，当尝试打印时，Chrome和Safari会悄悄地使用Times New Roman，而不是CSS中提供的自定义字体或无衬线回退。检测用户代理需要为这些浏览器设置更好的字体。检测

：）

（@user1691389:view-source通常显示从服务器接收的源，而不是当前源。）