css - 按钮高度小于 CSS 中指定的高度

Question

我这里有这个简单的按钮:http://jsfiddle.net/u6t5A/

如果您在 Firebug 中查看“计算样式”选项卡，您会看到高度为 24px，但引用的 CSS 规则是声明高度:30px(请在此处查看快照:http://twitpic.com/dfwp8j)

谁能告诉我为什么显示的按钮的高度不是 30px(如 CSS 中指定的那样)，而是 24px？

和行高有关系吗？或者可能使用内联 block ？

这是代码:

HTML:

<button>Bla bla bla</button>

CSS:

body, td, th {
    font-size: small;
}

button {
    display: inline-block;

    margin: 0 0.7em 0 0;
    padding: 0px 5px 4px 5px;

    height: 30px;

    border: 1px solid #dedede;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bfbfbf;

    background-color: #e9e9e9;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));
    background: -webkit-linear-gradient(top, #fff, #e9e9e9);
    background: -moz-linear-gradient(top, #fff, #e9e9e9);
    background: -ms-linear-gradient(top, #fff, #e9e9e9);
    background: -o-linear-gradient(top, #fff, #e9e9e9);

    font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
    font-weight: bold;
    font-size: 100%;

    line-height: 130%;

    color: #464646;
    cursor: pointer;
    text-decoration: none;

    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;

    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;

    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
}

Answer 1

高度包括内边距和边框，对于这些目的而言，高度为 6(顶部和底部边框各 1px，底部内边距 4px。30 - 6 = 24px