1

これについて私を助けてください。CSS と jQuery Mobile は初めてで、この問題が発生しました。

私のページのチェックボックスにはボックスが表示されません。ラベルのみ。ラベルをクリックすると、左側に四角が表示されます。

この問題は、CSS ファイルをローカル ファイルにダウンロードして参照した場合にのみ発生します。サーバーから CSS ファイルを直接参照すると、テキストの前にボックスが表示され、正常に動作します。以下はサンプルソースです。

エラーのあるソース:

<!DOCTYPE HTML> 
<html>
    <head>
        <title>Mobile App Login</title> 
        <meta name=viewport content="user-scalable=no,width=device-width">
        <link rel="stylesheet" href="../jQuery/jquery.mobile.css">
        <script src="../jQuery/jquery.js"></script>
        <script src="../jQuery/jquery.mobile.js"></script>
    </head>
    <body>
        <div data-role=page id=home>

            <div data-role=header>
                <h1>Login Screen</h1> 
            </div>

            <div data-role=content>
                <label>
                    <input type="checkbox" name="checkbox-0" /> 
                    I agree 
                </label>
                <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                <label for="checkbox-1">I agree</label>
            </div>
        </div>
    </body>
</html>

エラーのないソース:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Mobile App Login</title>
        <meta name=viewport content="user-scalable=no,width=device-width" />
        <link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
        <script src="../jQuery/jquery.js"></script>     
        <script src="../jQuery/jquery.mobile.js"></script>
    </head>
    <body>
        <div data-role=page id=home>

            <div data-role=header>
                <h1>Login Screen</h1>
            </div>

            <div data-role=content>
                <label>
                    <input type="checkbox" name="checkbox-0" /> 
                    I agree 
                </label>
                <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                <label for="checkbox-1">I agree</label>
            </div>
        </div>
    </body>
</html>

他のすべては正常に機能します。問題を引き起こすのはボックスの表示だけです。CSS と JS ファイルの最新のファイルを取得して確認しました。

箱がなければ、ユーザーはそれが単なるラベルだと思うかもしれません

初心者なので画像載せれなくてすみません…

皆さんありがとう。

4

1 に答える 1

1

フィールドセット内にチェックボックスを追加すると、同じ問題が解決しました。

<fieldset data-role="controlgroup">
  <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
  <label for="checkbox-2">I agree</label>
</fieldset>
于 2013-02-24T11:17:21.747 に答える