jquery-ui - jQuery UI 主题冲突 : SlickGrid and jQuery UI Tabs

Question

我正在尝试应用这个 SlickGrid 示例:

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

到我自己的网络项目。

当我将网格放到页面顶部时，它会正确呈现。但是，当我将其放入同一页面上的 jQuery UI Tabs 选项卡中时，呈现搜索图像的 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 Tabs之外的控件有以下内容:



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



底线

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

为什么该类(class)丢失了，我该如何解决这个问题？

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 content 现在作为类 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>

所以 CSS 规则 .ui-icon , .ui-icon-search和第三条规则的第一场比赛 .ui-state-default被应用。
但是，当相同的标记作为类 .ui-widget-content 的元素的后代存在时，上面第三条规则的第二部分( .ui-widget-content .ui-state-default )也匹配，即 更具体的 .见 http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg以星球大战为主题的 CSS 特性解释。本质上是 background第三条规则的属性，包括 background-position:50% 50%比单个选择器更具体 .ui-icon-search因此规则覆盖了正确的 background-position:-160px -112px .
解决方案
需要制作 .ui-icon-search规则与 .ui-widget-content .ui-state-default 相同或更具体可以通过以下任一方式完成的规则​​:

添加 !important到规则

向规则添加更多选择器

例如

.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 规则)的方法。我实际上很想看看自己是否有另一种方式!