Значок «Закрыть» JQuery-UI в Firefox отображается неправильно

Question

Я унаследовал веб-сайт ASP с некоторым интерфейсом JQuery на внешнем интерфейсе, который выполняет вкладки и меню. Работает отлично; Единственный сбой в том, что вкладки странно появляются в Firefox.

Вкладки добавляются, когда пользователь нажимает на меню Superfish. Вкладки выглядят хорошо, но добавлена ​​небольшая разметка для добавления значка «X» (закрыть) справа от вкладки. В IE и Webkit (Chrome, Safari и т. Д.) Вкладки выглядят так:

|---------|
|        x|
|Tabname  |
|---------|

Однако в Firefox это выглядит так:

|---------|
|         |
|Tabname  |
|x        |
|---------|

Я не так много знаю о JQuery, но я попытался поиграться с разметкой, но не могу отобразить значок «Закрыть» в правом верхнем углу Firefox, как это делается для любого другого браузера.

Соответствующая часть кода (т.е. если я уберу это, значки «закрыть» исчезнут :)) выглядит так:

  var $tabs = $('#tabs').tabs({
            tabTemplate: '<li class="close" align=left><a  href="#{href}">#{label}</a><span  class="ui-icon ui-icon-close" ></span></li>',
          });

Может кто-нибудь помочь мне понять, что здесь происходит? Если это уместно, то используются JQuery-1.4.2.min.js и JQuery-ui-1.8.4.min.js.

Answer 1

Возможно, вас заинтересует http://bugs.jqueryui.com/ticket/5603 Похоже, такая же проблема, о которой сообщалось, как об ошибке пользовательского интерфейса jquery.Это планируется исправить в версии 1.9 jquery ui, и вы можете найти некоторые возможные обходные пути по этой ссылке.

Например, на странице http://jqueryui.com/demos/tabs/#manipulation вы можете найти следующий обходной путь (который хорошо работает вFF):

#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }