JQuery: UI-иконка появляется странный

Question

При добавлении UI-значке элемента диалог в Jquery, что-то странно отображаются вместо запрошенного значка - (проверьте здесь для примера: http://jsfiddle.net/aE2Fb/)

Похоже, что ui-state-default как-то скрывает фактический значок, потому что, если я его удалю, значок появится нормально. Обратите внимание, что тот же вопрос возникает и с настройкой ui-state.

<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(); 
}); 

Похожие темы обсуждался здесь: jquery ui Portlet : incorrect effect on hover (ui-state-hover), но «исправить» не было объяснено на всех, и поэтому его не очень понятно, что происходит ...

Answer 1

Когда вы кладете DIV в jQuery UI, вы добавляете нагрузку дополнительных родителей и дополнительные классы, в результате чего файл изображения значков, который вы хотите, получает дважды.

Первое переопределение из css для стандартного фонового изображения виджетов, которое также устанавливает положение изображения на 50% 50% - поэтому помещаем середину изображения в вашу кнопку. Это снова снова возвращается к правильному файлу изображения значков, но без каких-либо настроек позиции, поэтому вы можете увидеть середину изображения значка в вашей кнопке.

Попробуйте положить промежуток значок в другой контейнер, и переместить щ-состояние по умолчанию и щ-угловые все классы в контейнере вместо:

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>