EDIT: Dies wurde durch nbsp im Quell-HTML verursacht. Ich lasse die Frage in der Hoffnung auf, es könnte jemand anderem helfen, das gleiche Problem zu lösen.JQuery Mobile Grid Verhalten unterscheidet sich zwischen lokalen und JSBin
Die Rasterfunktion von JQuery Mobile funktioniert nicht ordnungsgemäß, wenn ich sie lokal diene oder sie sogar als Datei öffne.
Der Testcode, den ich am Ende dieser Nachricht eingefügt habe, funktioniert in JSBin korrekt. Die Blöcke sind ohne vertikale Verschiebungen angeordnet. Hier ist der JSBin-Link und ein Link zu einem Bild der Ausgabe.
http://jsbin.com/bocubeqaza/1/edit?html,output
https://drive.google.com/file/d/0BxFySp3qjVxxUkgzeUpBME9kcW8/view?usp=sharing
die Datei lokal Serving erzeugt jedoch einen vertikalen Versatz in der rechten meisten Element jeder Gruppe von Blöcken. Hier ist ein Link zur Ausgabe des Codes (der keine lokalen Abhängigkeiten hat), wenn er lokal angezeigt wird.
https://drive.google.com/open?id=0BxFySp3qjVxxVkZ3czFacTdJOWM
(Sorry für die Bild-Links; Imgur Uploaders SO nicht Google Drive Links mag und ich eine andere öffentliche Stelle für Bildschirm packt nicht haben)
ich das Offensichtliche habe versucht, Dinge wie Löschen des Browser-Cache und Neustart. Darüber hinaus ist das Fehlverhalten reproduzierbar, wenn ich es von meinem Desktop aus diene und es auf meinem Handy (Android, Chrome-Browser) betrachte.
<!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>
Falls es hilfreich ist, gibt es auch ein Problem, das ich heute Morgen an der JQMobile Website geöffnet: https://github.com/jquery/jquery-mobile/issues/8501. Sie reagierten schnell, schlossen das Problem jedoch ab, da es in JSBin nicht reproduzierbar war.
Jede Hilfe wird geschätzt. Vielen Dank!
Vergessen zu erwähnen, die Ui-Grid-Blöcke werden wörtlich aus den Demoseiten von JQ Mobile übernommen. –