0

我在我的网络表单上实现了一个 jquery 自动完成输入框。

它可以在所有平台上完美运行。我的问题是我正在使用 jquery ui 进行样式设置。javascript 生成的下拉列表在 chrome 中的样式正确，但在 Firefox 和 IE 中，它是一个完全没有样式的 li 列表。

为什么会这样，我该如何纠正？

如果没有原因，我如何为 li 列表生成自己的样式，这种样式应该从哪里来？

我的头语法是：

   <link href="<?php echo base_url() ?>application/css/ui-lightness/jquery-ui-1.8.custom.css" media="screen" type="text/stylesheet" rel="stylesheet">
   <script src="<?php echo base_url() ?>application/scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
   <script src="<?php echo base_url() ?>application/scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
   <script src="<?php echo base_url() ?>application/scripts/customer_autocomplete.js" type="text/javascript"></script>

customer_autocomplete.js很简单：

$(function(){
  $("#customer").autocomplete({
    source: "sales_orders/get_customers" 
  });
});

下面显示的每个浏览器的示例图像，所有完全相同的代码和标题信息。

火狐13.1 火狐

IE 10 IE浏览器

铬 25.0 谷歌浏览器

一如既往的帮助

呈现的 HTML

<html>
   <head>
      <title>
         test
      </title>
   <link rel='shortcut icon' type='image/x-icon' href='http://domain.com/application/assets/images/favicon.ico' />
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <script src="http://domain.com/application/scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
   <script src="http://domain.com/application/scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
   <script src="http://domain.com/application/scripts/customer_autocomplete.js" type="text/javascript"></script> 
<link href="http://domain.com/application/css/ui-lightness/jquery-ui-1.8.custom.css" media="screen" type="text/stylesheet" rel="stylesheet">

   </head>
<body>
      <div  data-role="page"  data-theme="a">
      <div class="wrap-header">
         <div data-role="header" data-mini="true"  data-ajax="false">
            <a data-icon="grid" data-mini="true"  data-theme="a" onclick="window.location.href='/sales'">Menu</a>
            <h3>New Sales Order</h3>
         </div>
      </div>   
      <div data-role="content">

         <label for="customer">Customer</label>
         <input type="text" id="customer" name="customer"/>


      </div>

   </div>
</div>
 
</body>
</html>

即使我的输入在任何元素之外，同样的问题也适用。所以就在身体里。

我还必须提到这是一个 codeigniter 应用程序，不确定它是否起作用。

再次感谢。

4

1 回答 1

1

主要问题是您应该为下拉菜单设置背景颜色（例如白色），因为它处于绝对位置并且您需要指定背景（并且至少是 z-index:1）。

顺便提供一些 css 和 html 来找出任何问题。

于 2013-03-12T10:56:46.697 回答