我正在尝试使用 jquery mobile 创建一个简单的导航栏,但在桌面上看起来很奇怪。
当我跳转到起始页“./overview”时,整个菜单变大了,并且有一条奇怪的线将其抛出。如果我单击第二个菜单项,菜单会变小并且看起来正确。我去看看是否可以在 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>
有谁知道是什么导致这个菜单扩大?