0

入力/ボタン要素のボタン スタイルをどうにか台無しにしてしまいました。アンカータグは問題なく機能します。ここに写真があります：

ここに画像の説明を入力

私の「縮小された再現」はかなり基本的です：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
    <link rel="stylesheet" href="/static/jquery.mobile-1.3.2.css" />
    <script src="/static/jquery-1.9.1.min.js"></script>
    <script src="/static/jquery.mobile-1.3.2.js"></script>
    <script src="/static/jquery-ui-1.10.3.min.js"></script>
    <script src="/static/jquery.ui.touch-punch-2013.8.30.min.js"></script>
    <script src="/static/underscore-1.5.1.min.js"></script>
    <script src="/static/json2-2013.5.26.js"></script>
    <script src="/static/backbone-1.0.0.min.js"></script>
    ...
  </head>
  <body>
    <div data-role="page" id="main-content">
      <div data-role="header" data-theme="b">
      ...
      </div>
      <div data-role="content">
        <h1>Test</h1>
        <a href="#" data-role="button">Anchor</a>
        <form>
          <button>Button</button>
          <input type="button" value="Input">
          <input type="submit" value="Submit">
          <input type="reset" value="Reset">
        </form>
      </div>
    </div>
  </body>
</html>

レンダリング後の DOM:

  <div data-role="content" class="ui-content" role="main">
    <h1>Test</h1>
    <a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all"><span class="ui-btn-inner"><span class="ui-btn-text">Anchor</span></span></a>
    <form>
      <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Button</span></button>
      <input type="button" value="Input" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
      <input type="submit" value="Submit" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
      <input type="reset" value="Reset" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
    </form>
  </div>

いくつかの質問：

  1. 誰がこれを引き起こすのかを認識していますか?
  2. デバッグ方法に関するヒント/ポインタはありますか? JQM は、多くの html をページに挿入して、ウィジェットの表示を動的に拡張します。入力/ボタン要素をラップする必要があるものにブレークポイントを設定したいのですが、どこから始めればよいかわかりません。css を使用すると、ルールが実行されないタイミングを簡単に確認できます。しかし、このフレームワークでは、どこから始めればよいかわかりません。
4

0 に答える 0