为什么单击按钮时按钮的样式会发生变化？

Question

我编辑了按钮的样式，但是当我单击一个按钮时，会调用 function 并更改值（通过 ajax，如果这会影响任何内容），但按钮会像图像上一样更改。 这是我的代码：

$(document).ready(function() {
  $(':button').on('click', function(event) {
    $('#ID').val(this.id);
    var tmp = this.id;
    $.ajax({
      type: $('#klik').attr("method"),
      url: $('#klik').attr("action"),
      data: $('#klik').serialize(),
      success: function(d) {
        alert(d)
        $('#' + tmp).val(d);
        const button = document.getElementById(tmp);
        button.disabled = true;
        if (d == 'bomba') {
          alert('bb');
        }

      },
      error: function() {
        alert('Greska')
      }
    });
  });
});
var docFrag = document.createDocumentFragment();
for (var i = 0; i < 9; i++) {
  var row = document.createElement("tr")
  for (var j = 0; j < 9; j++) {
    var elem = document.createElement('input');
    elem.className = 'gumb';
    elem.type = 'button';
    elem.id = 'r' + i + 's' + j;
    elem.value = '';
    elem.innerHTML = elem.value;
    docFrag.appendChild(elem);
  }
  document.body.appendChild(docFrag);
  document.body.appendChild(row);
}

这是我的 CSS：

.gumb {
  width: 50px;
  height: 50px;
  background-color: blue;
  text-align: center;
  font-size: 25px;
  color: white;
  margin-bottom: 10px;
}

Answer 1

您需要对齐文本。 像这样的东西：

.gumb { vertical-align: middle; }