Question

我以某种方式搞砸了输入/按钮元素的按钮样式。锚标签工作得很好。这是一张图片：

enter image description here

我的“减少的责备”非常基本：

<!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>

几个问题：

任何人都会认识到会导致这种情况的原因吗？
有关如何调试的任何提示/指示？ JQM在页面中注入了大量的html，以动态增强小部件的显示。我想设置一个断点来应该包装输入/按钮元素，但我不知道从哪里开始。使用css，很容易看出规则何时不会触发。但是有了这个框架，我不知道从哪里开始。

如何调试Jquery移动按钮样式不起作用？

0 个答案: