jquery mobile navbar＆amp; listview项目有时会得到圆角

Question

我对navbar＆amp; listview项目，有时标记jqm创建添加ui-corner-top＆amp; ui-corner-bottom课程。这没有记录，我无法弄清楚为什么会发生这种情况，我没有任何自定义功能，我使用的是Chrome Mac 17

我的html（更新并删除了data-role =“按钮”）：

  <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>

外观如何：

在页脚导航栏上发生了同样的事情

它也开始用于listview项目

JQM的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可折叠的错误，角类应用于dom中的所有.ui-btn-inner元素，而不仅仅是可折叠范围内的那些元素。

已在最新的jquery移动源中修复，以下拉取请求详细说明了修复：https://github.com/jquery/jquery-mobile/pull/3661

我已经使用此修复程序测试了最新的源代码，它完全解决了这个问题。