0

Web フォームに 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 ファイアフォックス

IE10 インターネットエクスプローラ

クロム 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 に答える