css - firefox chrome 按钮的填充问题

Question

我的元素有问题，我不知道怎么办，chrome 和 firefox 与我的按钮显示的高度不同。我环顾四周，发现 firefox 的按钮有问题，所以我添加了下面的代码，但仍然不起作用。会是什么？

.button-type::-moz-focus-inner { border: 0; padding: 0; margin:0; }


.button-type {
  background: #a9a9a9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 3px rgba(255,255,255,0.2), inset 0 2px rgba(255,255,255,0.2), inset 0 28px 22px rgba(255,255,255,0.2), inset 0 -10px 28px rgba(0,0,0,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 3px rgba(255,255,255,0.2), inset 0 2px rgba(255,255,255,0.2), inset 0 28px 22px rgba(255,255,255,0.2), inset 0 -10px 28px rgba(0,0,0,0.2);
  font: Arial, Helvetica, sans-serif;
  line-height: 1;
  padding: 8px 15px;
  width: auto;
  height: auto;
  border: none;
  text-align: center;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  display: block;
  text-decoration: none;
  text-shadow: -1px -1px #333;
}
.button-type.black {
  background: #000;
  color: #fff;
}
.button-type.gray {
  background: #a9a9a9;
}
.button-type.light-gray {
  background: #d3d3d3;
  color: #222;
}

Answer 1

解决它的解决方案(和错误)是:

display:block

替换为:

display:inline