Jquery ui jQuery UI主题冲突：SlickGrid和jQuery UI选项卡

我正在尝试应用以下示例：

到我自己的网络项目

当我将网格放到页面顶部时，它会正确呈现。但是，当我将其放入同一页面上的jQueryUITabs选项卡时，呈现搜索图像的CSS精灵的偏移量不正确

该图标是用

<span title="Toggle search panel" class="ui-icon ui-icon-search ui-state-default ui-corner-all" style="float: right;" onclick="toggleFilterRow11()"/>

看起来jQueryUI选项卡也使用相同的CSS类，当然会出现冲突

查看IE9中的有效样式，正确呈现的jQuery UI选项卡之外的控件具有以下内容：

不正确渲染的控件如下所示：

底线

将SlickGrid放置在jQueryUI选项卡中会导致

ui图标搜索

类丢失，从而设置错误的

background-position-x/y

为什么该类会丢失？我如何解决该问题？

问题 当jQueryUI从HTML创建选项卡时，它会添加jQueryUI CSS类。从jQueryUI示例中：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>

图标的标记为：

<span style="float:right" class="ui-icon ui-icon-search ui-state-default ui-corner-all" title="Toggle search panel" onclick="toggleFilterRow()"></span>

或

---

我想不出一种方法不包括更改jQueryUI CSS（或者使用上面两种解决方案中的一种在您自己的CSS中复制

.ui图标搜索
规则）。我真的很想看看自己是否还有别的办法
 这是一个很棒的解释。但愿我能投超过1票。我将把这个问题留待一段时间，看看是否有人能提供一个干扰较小的解决方案。
.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url(images/ui-icons_222222_256x240.png);
}

.ui-icon-search {
    background-position: -160px -112px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}

<span style="float:right" class="ui-icon ui-icon-search ui-state-default ui-corner-all" title="Toggle search panel" onclick="toggleFilterRow()"></span>

.ui-icon-search {
    background-position: -160px -112px !important;
}

.ui-icon-search, .ui-widget-content .ui-icon-search {
    background-position: -160px -112px;
}