Question

将 ui-icon 元素添加到 jquery对话框时，会显示一些奇怪的内容而不是请求的图标 - （请在此处查看示例：{{3} }）

似乎 ui-state-default 以某种方式隐藏了实际图标，因为如果我删除它，那么图标就会显示确定。请注意，ui-state-hover也会出现同样的问题。

<div id="dialog" title="Basic dialog" class="">  
<span class="ui-icon ui-state-default ui-icon-plusthick ui-corner-all" ></span>
</div>

$(function() {
$( "#dialog" ).dialog();
});

这里讨论了类似的主题：http://jsfiddle.net/aE2Fb/，但是“修复”根本没有解释，因此它不是很清楚，发生了什么......

Answer 1

当你将div放入jQuery UI对话框时，你会添加一些额外的父级和额外的类 - 结果是你想要的图标图像文件被覆盖了两次。

第一个覆盖来自标准窗口小部件背景图像的css，它还将图像位置设置为“50％50％＆＃39; - 所以将图像的中间部分放在按钮上。然后再次将其覆盖回到正确的图标图像文件，但没有任何位置设置 - 因此您最终会看到按钮中图标图像的中间位置。

尝试将图标span放在另一个容器中，然后将ui-state-default和ui-corner-all类移到容器中：

http://jsfiddle.net/7CLL6/

<div id="dialog" title="Basic dialog" class="">  
  <span class='ui-state-default  ui-corner-all'>
    <span class="ui-button ui-icon ui-icon-plusthick"></span>
  </span>
</div>

jquery ui对话框：ui-icons显示怪异

1 个答案: