Question

我正在尝试使用JQuery Mobile制作一个非常简单的页面（这是我第一次真正玩它）。我似乎无法正确显示导航栏。 JQuery Mobile页面上的代码看起来很简单，我可以说，我正在逐字复制它。它显示如下......

enter image description here

这是我的代码（另外，FYI，theme.css文件是默认的JQuery css文件）：

<html>
   <head>
      <title></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="../css/theme.css" />
      <script src="../js/jquery-1.9.1.min.js"></script>
      <script src="../js/jquery.mobile-1.3.0.min.js"></script>

      <script type="text/javascript" src="../js/maptest.js"></script> 
   </head>

   <body>

      <div data-role="page" id="main">
        <div data-role="header">
           <div data-role="navbar">
              <ul>
                 <li><a href="#" class="ui-btn-active ui-state-persist">Test</a></li>
                 <li><a href="#">Test</a></li>
                 <li><a href="#">Test</a></li>
              </ul>
           </div>
        </div>

        <div data-role="content">
           <ul data-role="listview"> 
              <li>Acura</li> 
              <li>Audi</li> 
              <li>BMW</li> 
              <li>Cadillac</li> 
              <li>Ferrari</liI>
           </ul> 
        </div>

        <div data-role="footer">
           <p>footer</p>
        </div>

     </div>
   </body>

</html>

Answer 1

将以下内容添加到您的页面中：

 <code><meta http-equiv="X-UA-Compatible" content="chrome=1"></code>

好像你正在加载IE。此页面在IE页面中加载Chrome frame activex以呈现JQuery使用的webkit样式表指令。

您还应该认真考虑将导航栏放在内容div中。

JQuery Mobile导航栏没有正确调整大小

1 个答案: