0

我正在尝试使用 JQuery Mobile 制作一个非常简单的页面（这是我第一次真正使用它）。我似乎无法让导航栏正确显示。JQuery Mobile 页面上的代码看起来非常简单，据我所知，我正在逐字复制它。它显示像这样虽然......

在此处输入图像描述

这是我的代码（仅供参考，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>
4

1 回答 1

0

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

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

看来您正在 IE 中加载。此页面在 IE 页面中加载 Chrome 框架 activex 以呈现 JQuery 使用的 webkit 样式表指令。

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

于 2014-01-31T02:19:50.743 回答