jquery モバイルを使用してシンプルなナビゲーション バーを作成しようとしていますが、デスクトップでは奇妙に見えます。
開始ページ「./overview」にジャンプすると、メニュー全体が大きくなり、奇妙な行が表示されます。2 番目のメニュー項目をクリックすると、メニューが小さくなり、正しく表示されます。Firefox で再現できるかどうかを確認したところ、概要ページに固有のものではないことに気付きました。ドメインの後に「./stats」と入力すると、統計ページに移動し、メニューが再び別の方法でレンダリングされます。概要ページに戻ると、メニューは正常に見えます。そのため、URL バーに入力したページでのみメニューが正しく表示されないようです。別のページに切り替えると、バーの URL が更新されますが、見た目は問題ありません。メニューを元に戻すと、その行がスローされてメニューが再び大きくなります。
両方のページのソースを確認しましたが、同じに見えるので、他に何を確認すればよいかわかりません。
概要
<html>
<header>
<title>Overview</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</header>
<body>
<h1>Overview</h1>
<h3></h3>
<div data-role="header" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="/10/overview" class="ui-btn-active ui-state-persist">Overview</a></li>
<li><a href="/10/stats">Status</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</body>
</html>
統計
<html>
<header>
<title>Stats</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</header>
<body>
<h1>Stats</h1>
<h3></h3>
<div data-role="header" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="/10/overview">Overview</a></li>
<li><a href="/10/stats" class="ui-btn-active ui-state-persist">Stats</a></li>
</ul>
</div>
</div>
</body>
</html>
このメニューの拡大の原因を知っている人はいますか?