Jquery ui jQuery UI图标显示问题/问题

我可能只是错过了一两件事

当我尝试使用jQueryUI图标时，我看到了一些奇怪的东西。看起来当它显示时，它指向了精灵上两个图标中间的一个地方，它们是错误的图标。我只是想这么做：

<span id="test" class="ui-icon ui-icon-plusthick"></span>

现在，如果，比方说，我把span标记放在html的其余部分之上，上面的工作就可以了；例如，在页面的顶级div上方。但是，例如，如果我尝试将它放在一个表的“td”元素中，那么它会产生我上面描述的奇怪的“半图标”效果，即它没有显示来自精灵的正确图标

与此观察结果有些关联（图标装饰元素的显示和行为似乎取决于其包含元素的CSS）；在ui lightness主题附带的漂亮示例页面上，这些可爱的按钮似乎取决于这样一个事实：它们被包装在一个ID为“icons”的“ul”元素中，然后跨度被包装在“li”元素中，这也会影响按钮的显示；如本例所示：

我希望我的纽扣看起来像那些；获得良好的悬停效果；并且有相同的尺寸等等，但是看起来需要做一些工作才能使一个人的按钮看起来像那样。所以我想知道，为什么这个示例设置得如此依赖于包装器？（显然有很多图标，所以他们不得不以某种方式显示它们，但是……如果能看到一个例子，它只是一个独立的按钮，看起来像那样，但不需要所有的包装来让它看起来很漂亮，那就太好了。我最终会自己去弄清楚，但希望在这里得到更好的理解）

---

另一件我不明白的事情是，我使用的是“ui轻量级”主题，我有一个下载主题时出现的示例页面，图标看起来很好；但在我正在处理的页面上，它指向了一个精灵图像，其中图标是黑色的，而不是“ui亮度”主题中漂亮的橙色图标。当我检查Chrome调试器中的元素时，我可以看到它指向一个不同的sprite JPG，而不是来自示例主题的sprite JPG。我的理解是，语义“ui图标”的使用告诉它该做什么，它应该从正确的精灵中抓取图标，因为它知道它正在使用ui亮度主题。（其他元素正确显示橙色ui亮度主题元素，例如，文本按钮看起来像是主题的一部分）。但不知何故，它将不需要的黑色图标精灵优先于想要的橙色图标精灵。

我的问题显然是关于jQuery UI的新手问题，但对于其他正在与这些问题作斗争的人来说，其要点是：

• 显示图标似乎取决于父元素
• 让它与jQueryUI主题一起工作（即显示正确的图标颜色等）也取决于父元素
• 父元素的HTML元素类型似乎并不重要（例如，包含列表项的无序列表或包含TR/TD元素的表）；重要的是父级中引用的jQuery UI类

下面是我为MVC应用程序工作的一个示例，其中UI显示一个按钮，该按钮实际上是一个锚定标记，位于一个表单元格中：

<table>

    <tr>

        <td>
            <div class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">
                <a class="ui-icon ui-icon-plusthick" href="@Url.Action("Create", "Widget")" title="Add a new widget"></a>
            </div>
       </td>

希望这对别人有帮助。Cheers-dB

（这没有显示半图标问题，但显示了其他问题。无论如何，我可能会调整一些CSS并使其工作，我只是觉得奇怪，你必须将这些图标包装在两个单独的元素中以获得所需的效果）。

<table>

    <tr>

        <td>
            <div class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">
                <a class="ui-icon ui-icon-plusthick" href="@Url.Action("Create", "Widget")" title="Add a new widget"></a>
            </div>
       </td>

    $('.ui-icon').hover(
        function () {
            $(this).parent().addClass('ui-state-hover');
        },
        function () {
            $(this).parent().removeClass('ui-state-hover');
        }
    );