JQuery Мобильное поведение сетки, отличное от локального и JSBin

EDIT: Это оказалось вызвано nbsp в исходном HTML. Я оставляю вопрос в надежде, что он поможет кому-то другому решить ту же проблему.JQuery Мобильное поведение сетки, отличное от локального и JSBin

Функция сетки JQuery Mobile работает некорректно, когда я обслуживаю ее локально или даже открываю ее как файл.

Контрольный код, который я вставил в нижней части этого сообщения, работает правильно в JSBin. Блоки выравниваются без вертикальных смещений. Вот ссылка JSBin и ссылка на образ вывода.

http://jsbin.com/bocubeqaza/1/edit?html,output

https://drive.google.com/file/d/0BxFySp3qjVxxUkgzeUpBME9kcW8/view?usp=sharing

сервировки файл локально, однако, производит вертикальное смещение в правом наиболее элемент каждой группы блоков. Вот ссылка на вывод кода (который не имеет локальных зависимостей) при просмотре локально.

https://drive.google.com/open?id=0BxFySp3qjVxxVkZ3czFacTdJOWM

(Извините за ссылки на изображения, Imgur загрузчик SO не любит диски ссылки Google и у меня нет другого общественное место для экрана грейферов)

Я попытался очевидным такие как очистка кеша браузера и перезагрузка. Более того, неправильное поведение воспроизводится, когда я его обслуживаю с рабочего стола и просматриваю его на своем телефоне (Android, браузер Chrome).

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" />   

    <title>Sandbox</title> 

    <meta name="viewport" content="width=device-width" initial-scale=1.0> 


    <!-- STYLESHEETS -->  
    <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"> 

    <!-- Scripts --> 
    <script src="http://code.jquery.com/jquery-2.2.4.js"></script> 
    <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script> 
    </head> 
    <body> 

    <div data-role="page" id="sandbox"> 
     <div data-role="content"> 

     <div style="background: grey;">Foo</div> 
     <div class="ui-grid-a"> 
         <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div> 
         <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div> 
     </div><!-- /grid-a --> 
     <div style="background: grey;">Bar</div> 
     <div class="ui-grid-b"> 
         <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div> 
         <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div> 
         <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div> 
     </div><!-- /grid-b --> 
     </div> 


</div> 
    </body> 
</html>

В случае, если это полезно, есть также вопрос, который я открыл на сайте JQMobile сегодня утром: https://github.com/jquery/jquery-mobile/issues/8501. Они быстро отреагировали, но закрыли этот вопрос, поскольку он не воспроизводился в JSBin.

Любая помощь приветствуется. Благодаря!

источник

2016-08-23 Mike Ellis

Вспомните, что блоки ui-grid взяты на доске из демонстрационных страниц JQ Mobile. –

Смутно это оказалось вызванным символами nbsp. Они вошли в мой код, когда я вставил примеры Grid из JQ Mobile Demos, и мой редактор не был настроен для их отображения (это сейчас!). Объясняя этот вопрос, похоже, что JSBin помогает скрыть их от вставленного HTML-кода, что объясняет, почему код работал там, а не локально.

источник

2016-08-24 15:21:01

JQuery Мобильное поведение сетки, отличное от локального и JSBin

ответ

Смежные вопросы