Css 如何在Extjs4 tpl中添加检测当前浏览器的条件

我在extjs4中工作。我正在显示带有时间、项目名称和项目编号的tpl。我的tpl为-

tpl : '<tpl for=".">'+
        '<div class = "timer-icon"><img class="taskTimerIconCls" src="./UI-INF/images/s.gif" onclick="Ext.getCmp(\'' + me.id + '\').showTimerWindow()">' +
        '<span> <span id="timerId"> {hrsWorked}</span><br><a onclick="Ext.getCmp(\'' + me.id + '\').showTimerWindow()">Stop Timer</a></span></div>' +
        '<div class = "task-text-cls"><span  id="taskText">{projectName}&nbsp&nbsp({formattedProjectNumber})</span><br>{title}</div>'
        + '</tpl>',

---

它在IE、FireFox中正常工作，但在chrome中出现问题[字段之间包含更多空间]。铬需要125px的宽度才能正常工作。因此，在extjs tpl中，如何检测当前浏览器以及如何应用条件css。

extjs向HTML主体元素添加了一个指示浏览器（引擎）的css类，例如：

• x-webkit
• x-铬
• x壁虎
• x-ie
• x-ie8
• ……等等

例如，当您检查HTML时，可以在Chrome的开发工具中看到：

在CSS文件中，您可以使用该类创建基于浏览器的选择器，例如：

.x-chrome .task-text-cls {
    width: 125px;
}

如果要根据浏览器更改模板的标记，可以使用

Ext

对象上的相应属性，例如：

tpl：(
'' +
（Ext.isChrome？“”）：+
'' + 
''
''
)

Thanx非常感谢先生的回复……这将对我有很大帮助……先生想再问一个问题，如果我想应用操作系统方面的css，那么我该如何应用？因为我的一些css不支持mac。因此，如何将条件css应用于windows和mac osSir，x-gecko适用于mozilla firefox以及Internet Explorer 11。因此，如何区分那些应用单独的CSS它们没有自动应用于操作系统的CSS类，但是您可以使用上面显示的第二种方法，或者向body元素添加一个类，如

x-mac

，然后使用第一种方法。我不认为IE11应该使用

x-gecko

。IE11在ExtJS 4.2.2之前是不受支持的，微软改变了它的用户代理，这就是框架错误地检测Gecko的原因。也请参考@matt…thanx以帮助我。对于IE11，我希望留有空白：30px，对于mozila firefox，-70px。我试着用.x-gecko.notification_bubble{margin left:-30px；}..然后它在IE11中工作，但不支持mozilla firefox。

.x-chrome .task-text-cls {
    width: 125px;
}

tpl: (
    '<tpl for=".">' +
        (Ext.isChrome ? '<div class="chrome">' : '<div>') + 
            '<img src="test.jpg" />' + 
        '</div>'
    '</tpl>'
)