我在网络表单上实现了一个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
IE 10
Chrome 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应用程序,不确定它是否起任何作用。
再次感谢。
答案 0 :(得分:1)
主要问题是你应该为下拉菜单设置一个背景颜色(例如白色),因为它位于绝对位置,你需要指定一个背景(至少是一个z-index:1)。
顺便提供一些css和html来找出任何问题。