Question

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

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

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

如果没有理由，我怎样才能为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" 
  });
});

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

firefox 13.1 firefox

IE 10 internet explorer

Chrome 25.0 google chrome

一如既往的帮助

呈现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应用程序，不确定它是否起任何作用。

再次感谢。

Answer 1

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

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

jQuery自动完成样式在Chrome中工作，但不适用于Firefox或IE

1 个答案: