按钮背景不完全填写Firefox

Question

所以我有一个按钮，但问题就在这里。在Firefox 上只有它没有完全填满。如此处所见

这是应该的样子

我不确定该怎么做。这是CSS

.button-panel .button {
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  height: 55px;
  font-size: 27px;
  letter-spacing: 0.05em;
  text-align: center;
  width: 100%;
  font-family: 'Avenir Next';
  display: inline-block;    
  font-weight: 300;
  background-color: #6699FF;
  outline: 3px solid #6699FF;
  line-height: 59px;
}

演示http://jsfiddle.net/h7PXe/

Answer 1

显示的原因是你使用的行高大于元素的高度。

在这里你可以看到盒子模型是如何工作的并且是大纲： http://i.stack.imgur.com/Q6J6n.png

您可以在不使用基本属性的情况下实现相同的外观（然后它可以在每个浏览器中使用）

.button-panel .button {
    display: inline-block;
    padding: 7px 0 5px;
    border: 3px solid #6699FF;
    width: 100%;
    font-family: 'Avenir Next';
    font-size: 27px;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-align: center; 
    background-color: #6699FF;
    cursor: pointer;
  }

http://jsfiddle.net/h7PXe/1/

Answer 2

height: 100%。您需要这样做，否则浏览器将不知道要设置高度的内容。

.button-panel .button {
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  height: 55px;
  font-size: 27px;
 letter-spacing: 0.05em;
 text-align: center;
 width: 100%;
 font-family: 'Avenir Next';
 display: inline-block;    
 font-weight: 300;
 background-color: #6699FF;
 outline: 3px solid #6699FF;
 line-height: 59px;
 height: 100%
}

和demo。