具有平滑度主题的 jQuery UI 按钮在单击并按住时会增长

Question

我想显示一个带有游戏列表的 jQuery UI 选择菜单，并显示 2 个按钮来遍历游戏列表，并为此准备了 jsFiddle：

HTML 代码：

<form>
  <select name="games" id="games"></select>
  <button id="prevGame">&lt;</button>
  <span id="currGame">Game #2</span>
  <button id="nextGame">&gt;</button>
</form>

JavaScript 代码：

$("#games").selectmenu();

setTimeout(function() {
  updateGamesMenu();
}, 6000);

$('#prevGame').button().click(function(e) {
  e.preventDefault();
  $('#currGame').html('<i>Prev game</i>');
});

$('#nextGame').button().click(function(e) {
  e.preventDefault();
  $('#currGame').html('<i>Next game</i>');
});

function updateGamesMenu() {
  var yourGames = [];
  for (i = 1; i < 3; i++) {
    yourGames.push('<option value="' + i + '">Game #' + i + '</option>');
  }
  var yourGroup = '<optgroup label="Your turn">' + yourGames.join('') + '</optgroup>';

  var hisGames = [];
  for (i = 5; i < 9; i++) {
    hisGames.push('<option value="' + i + '">Game #' + i + '</option>');
  }
  var hisGroup = '<optgroup label="Their turn">' + hisGames.join('') + '</optgroup>';

  $("#games").selectmenu('destroy')
    .append(yourGroup)
    .append(hisGroup)
    .selectmenu();
}

它工作正常（除了选择菜单没有与 2 个按钮垂直对齐的小问题）。

但是当我将相同的代码放入my Wordpress website 时，按钮会变成橙色，并且在单击并按住时（又名 onmousedown）按钮会增大尺寸。

请问为什么会这样？

我检查了 Firefox 控制台中的按钮元素，并注意到当我单击并按住按钮时，这些按钮会变为 ui-state-active CSS 样式，但我不确定在哪里进一步查看。

更新：

我已将与按钮相关的部分从 Wordpress twentythirteen theme style.css 复制到 my updated jsFiddle，现在可以在那里重现该问题：

/* Buttons */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background: #e05d22; /* Old browsers */
    background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
    border: none;
    border-bottom: 3px solid #b93207;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    padding: 11px 24px 10px;
    text-decoration: none;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
    background: #ed6a31; /* Old browsers */
    background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
    outline: none;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
    background: #d94412; /* Old browsers */
    background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */
    border: none;
    border-top: 3px solid #b93207;
    padding: 10px 24px 11px;
}

所以这使我的问题与 CSS 相关 - 为什么按钮在单击时会变大？

作为一名 CSS 菜鸟，我尝试过评论最后两行，但这无济于事：

/* border-top: 3px solid #b93207; */
/* padding: 10px 24px 11px; */

Answer 1

删除

button:active

来自

button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active {
    background: #d94412;
    background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%);
    background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%);
    border: none;
    border-top: 3px solid #b93207;
    padding: 10px 24px 11px;
}

或者只是将它的填充设置为 0。

button:active{
    padding: 0;
}

这将阻止它在活动时展开（点击）。

查看元素状态的一种方法是在 chrome 中检查并使用检查器工具：

或者使用这些按钮具有其 ID 的事实

button#nextGame:active,
button#prevGame:active{
    padding:0;
}