5

我正在尝试应用这个 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 Tabs 之外的控件具有以下内容：

正确的样式

呈现不正确的控件如下所示：

错误的风格

底线

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

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

4

1 回答 1

12

问题

当 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内容现在作为具有 class 的元素的子元素退出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

  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（或.ui-icon-search使用上述两种解决方案之一在您自己的 CSS 中复制规则）的方法。我真的很想看看自己是否还有其他方法！

于 2012-04-01T20:47:21.350 回答