-1

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

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

谁能告诉我为什么显示按钮的高度不是 30px（在 CSS 中指定），而是 24px？

它与行高有关吗？或者也许使用内联块？

这是代码：

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;
}
4

4 回答 4

2

索林，

padding-bottom (4px) + 边框顶部 (1px) + 边框底部 (1px) = 6px

6px - 高度 (30px) = 24px

所以，增加按钮的高度：

button { height: 36px; }
于 2013-10-03T15:57:13.950 回答
2

高度包括内边距和边框，为此目的为 6（每个顶部和底部边框 1px，底部内边距 4px。30 - 6 = 24px

于 2013-10-03T15:55:41.347 回答
1

在 CSS 盒子模型之后，元素的大小是height++ padding。border如果您有以下 css 示例：

.my-element { height: 10px; padding: 2px; border: 2px solid #000; }

比它的总高度为 10+2*2+2*2=18px。（2 * 2，因为您必须在顶部和底部添加填充，并在顶部和底部添加边框）。

现在，如果您查看按钮的大小（至少萤火虫所说的），那是完全正确的：您所说的高度（30px）减去填充，减去边框。

按钮的行为就好像您明确地为 box-sizing 属性赋予了border-box值。这意味着元素的外部宽度将是您定义的高度，但内部高度将是外部高度减去填充和边框。现在，如果您给按钮属性content-box上的值box-sizing，它将再次添加填充和边框。

但请注意；您的按钮实际上是 30 像素高，但只有内容的内部高度更小（即 24 像素）。

于 2013-10-03T16:01:34.957 回答
-2

我赞赏您尝试动态化但坚持使用页面布局进行动态化的尝试。您正在使用百分比和其他相对值，例如em值。如果您想要像素精度，则需要使用像素px值。当您在任何Linux 机器上打开该内容时，您的方法变得更加主观。

于 2013-10-03T15:54:20.950 回答