JQuery Mobile: навигатор внутри нижнего колонтитула последний элемент отображается неправильно

Question

Я использую 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> 

Последний элемент в списке NavBar отображает на следующей строке, как будто текст завернуты.

Я не могу понять, что вызывает последний элемент, который будет смещена в этом роде.

Я пробовал это в различных различных элементах на странице, а также с 2, 3, 4 и 5 элементами в списке. Поведение такое же, независимо от браузера (Safari или Chrome).

Может ли кто-нибудь помочь?

Answer 1

Проблема не вызвана JQuery Mobile, а фактически текстовым редактором (в данном случае Sublime Text 3), отображающим обычный символ пробела и символ пространства UNICODE одинаковым образом.

Пространства UNICODE, которые были оставлены из копии-копии из исходного документа, преобразуются браузером в  , что затем вызывает проблему переноса строки.

Замена пространства UNICODE пространством пробела в HTML исправила проблему.

Для пользователей Sublime Text, чтобы избежать этого, в будущем установите пакет Unicode Character Highlighter.