带有按钮的Firefox chrome填充问题答案

【问题标题】：firefox chrome padding issue with button带有按钮的Firefox chrome填充问题
【发布时间】：2013-03-02 10:57:04
【问题描述】：

我的项目有问题，我不知道方法，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;
}

【问题讨论】：

标签： css google-chrome firefox padding

【解决方案1】：

解决它的解决方案（和错误）是：

display:block

替换为：

display:inline

【讨论】：