JQuery Mobile Navbar и элементы списка иногда получают закругленные углы

Question

У меня странная проблема с элементами navbar и listview, иногда разметка, которую создает jqm, добавляет классы ui-corner-top и ui-corner-bottom. Это не задокументировано, и я не могу понять, почему это произойдет, у меня нет пользовательских функций, я использую Chrome Mac 17

Мой HTML (обновлены и удалены data-role = "button"):

  <div data-role="navbar" data-iconpos="right">
    <ul>
      <li><a href="#" class="help_button" data-icon="info" data-iconpos="notext">Help</a></li>
      <li><a href="#" id="save_button" data-icon="check">Save</a></li>
    </ul>
  </div>

Вот HTML-запрос, создаваемый jquery (data-role = "button" удален, но все еще расширяется закругленными углами):

<div data-role="navbar" data-iconpos="right" class="ui-navbar" role="navigation">
  <ul class="ui-grid-a">
    <li class="ui-block-a"><a href="#" class="help_button ui-btn ui-btn-up-a ui-btn-icon-right ui-btn-up-undefined" data-icon="info" data-iconpos="right" data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="span"><span class="ui-btn-inner ui-corner-top ui-corner-bottom"><span class="ui-btn-text">Help</span></span></a></li>
    <li class="ui-block-b"><a href="#" id="save_button" data-icon="check" data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="span" data-iconpos="right" class="ui-btn ui-btn-up-a ui-btn-icon-right" name="save_button"><span class="ui-btn-inner ui-corner-top ui-corner-bottom"><span class="ui-btn-text">Save</span></span></a></li>
  </ul>
</div>

Как это выглядит:

То же самое происходит в навигационной панели нижнего колонтитула

Он также начал делать это для элементов списка

JQM's html:

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-corner-bottom ui-btn-up-a">
  <div class="ui-btn-inner ui-li ui-corner-top ui-corner-bottom">
    <div class="ui-btn-text">
      <a href="#settings" class="ui-link-inherit">
        <img src="editor/images/icons/settings.png" class="ui-li-icon ui-li-thumb" alt="">
        Site settings
      </a>
    </div>
    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
  </div>
</li>

Происходит и на некоторых демонстрациях 1.1.0 RC1:

Answer 1

Удалите data-role="button" из тегов ссылки на панели навигации. Они инициализируются как button виджеты и как navbar виджеты ссылок, что приводит к забавным кнопкам.

Вот демоверсия: http://jsfiddle.net/jasper/qXr79/

Answer 2

На самом деле это ошибка в jquery mobile, которая может быть свернута, угловые классы применяются ко всем элементам .ui-btn-inner в dom, а не только к элементам, входящим в область свертывания.

Исправлено.В последнем источнике jquery mobile следующий запрос на получение сведений детализирует исправление: https://github.com/jquery/jquery-mobile/pull/3661

Я протестировал последний источник с этим исправлением, и он полностью решает проблему.