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

Question

我正在尝试应用此SlickGrid示例：

http://mleibman.github.com/SlickGrid/examples/example4-model.html

到我自己的网络项目。

当我将网格放到页面顶部时，它会正确呈现。但是，当我将其放入同一页面上的jQuery UI选项卡选项卡时，呈现搜索图像的CSS Sprite被错误地偏移。

图标以

呈现

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

看起来jQuery UI Tabs也使用相同的CSS类，当然会出现冲突。

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

呈现错误的控件如下所示：

底线

将SlickGrid放在jQueryUI选项卡中导致ui-icon-search类丢失，因此设置了错误的background-position-x/y。

为什么这个课程会丢失，我该如何解决这个问题？

Answer 1

问题

当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>

变为

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
    <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>

问题正在发生，因为SlickGrid内容现在作为具有类ui-widget-content的元素的子项退出。实际上，网格标题中有2个具有该类的祖先 - 在上面的代码中，<div id="tabs">和<div id="tabs-1">在创建标签时都应用了该类。

应该用于获取正确搜索图标的jQueryUI CSS规则是：

.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>

因此，应用了第3条规则.ui-icon的CSS规则.ui-icon-search，.ui-state-default和第一次匹配。

但是当同一标记作为具有类.ui-widget-content的元素的后代存在时，上面第3条规则的第2部分（.ui-widget-content .ui-state-default）也匹配更具体。有关 CSS特异性的星球大战主题解释，请参阅http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg。从本质上讲，包含background的第3条规则的background-position:50% 50%属性比单一选择器.ui-icon-search规则更具体，因此会覆盖正确的background-position:-160px -112px。

解决方案

需要使.ui-icon-search规则与.ui-widget-content .ui-state-default规则相同或更具体，可以通过以下方式完成：

1. 将!important添加到规则
2. 向规则添加更多选择器

例如

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

或

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

我想不出一种不涉及更改jQueryUI CSS的方法（或使用上述两种解决方案之一复制自己CSS中的.ui-icon-search规则）。我真的很想知道自己是否有另一种方式！