jquery mobile navbar & listview 项目有时会出现圆角答案

【问题标题】：jquery mobile navbar & listview items sometimes get rounded cornersjquery mobile navbar & listview 项目有时会出现圆角
【发布时间】：2012-03-24 05:48:03
【问题描述】：

我对导航栏和列表视图项目有一个奇怪的问题，有时 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>

这是 jquery 创建的 html（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的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 演示中：

【问题讨论】：

我昨天也在想同样的事情。您应该将此作为问题发布到github.com/jquery/jquery-mobile/issues

标签： jquery jquery-mobile

【解决方案1】：

从导航栏中的链接标签中删除data-role="button"。它们被初始化为 button 小部件和 navbar 链接小部件，这会产生看起来很有趣的按钮。

这是一个演示：http://jsfiddle.net/jasper/qXr79/

【讨论】：

嗨，感谢您的帮助，我已经删除了 data-role="button" 我从早期的布局中留下了它，但它仍在发生，请参阅原始 q 以获取更新的 html
又更新了原版，开始在listview项目上做，真的很奇怪。
它也在 1.1.0 RC1 演示页面上发生。
@Rob 我看到它发生在 Firefox 10 的文档中，但 Chrome 17 看起来更好。然而，我的演示在 Firefox 10 中看起来不错，即使我插入了您的 HTML：jsfiddle.net/jasper/qXr79/1

【解决方案2】：

这实际上是 jquery mobile 可折叠的错误，角类应用于 dom 中的所有 .ui-btn-inner 元素，而不仅仅是可折叠范围内的元素。

已经在jquery mobile的最新源码中修复了，下面的pull request详细说明了修复：https://github.com/jquery/jquery-mobile/pull/3661

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

【讨论】：

是的，但在不相关的内容上。