JQuery Mobile：内部页脚的导航栏最后一个元素显示不正确

Posted 2021-05-06

我正在使用JQuery Mobile 1.4.5，而且我没有任何类型的自定义CSS。码：

<div data-role="page" id="page-id">
    ...
    <div data-role="footer" data-position="fixed" style="overflow:hidden;" data-hide-during-focus="false">
      <div data-role="navbar">
        <ul>
          <li><a href="#" class="ui-btn-active">Navbar 1</a></li>
          <li><a href="#">Navbar 2</a></li>
          <li><a href="#">Navbar 3</a></li>
          <li><a href="#">Navbar 4</a></li>
          <li><a href="#">Navbar 5</a></li>
        </ul>
      </div><!-- /navbar -->
    </div><!-- /footer -->
</div>

导航栏列表中的最后一个元素显示在下一行，就像文本已包装一样。

我无法弄清楚导致最后一个元素错位的原因。

我已经在页面上的各种不同元素中尝试了这个，以及列表中的2,3,4和5个元素。无论浏览器（Safari或Chrome）如何，行为都是相同的。

有人可以帮忙吗？

答案

问题不是由JQuery Mobile引起的，而是由文本编辑器（在本例中为Sublime Text 3）以同样的方式显示常规空格字符和UNICODE空格字符。

UNICODE空间 - 从源文档的复制粘贴中遗留下来 - 被浏览器转换为 ，然后导致换行问题。

用html中的空格键空格替换UNICODE空格修复了该问题。

对于Sublime Text用户，为避免将来安装Unicode Character Highlighter包。