Question

我有一个带有一些按钮的工具栏，但出于某种原因，我有颜色的按钮，标签内没有任何文字，而且它们与其他按钮不对齐。

enter image description here

<div id="tools">
    <button class="B4 pallete" title="Dark Red"></button>
    <button class="Bc pallete" title="Red"></button>
    <button class="Bl pallete" title="Bold">B</button>
    <button class="Bo pallete" title="Italic">I</button>
</div>

http://jsfiddle.net/hjo41wm2/

为什么呢？以及如何解决它？

Answer 1

内联元素的垂直对齐 - 为什么它的工作方式如此。

假设我们有以下HTML（与上面类似）：

<div id="tools">
    <button class="ExA pallete" title="Example Auto">E</button>
    <button class="Ex0 pallete" title="Example Zero">E</button>
    <button class="B4 pallete" title="§4 Dark Red"></button>
    <button class="Bc pallete" title="§c Red"></button>
    <button class="Bl pallete" title="§r Bold">B</button>
    <button class="Bo pallete" title="§r Italic">I</button>
</div>

我添加了两个按钮来说明一些概念。

让我们看看以下CSS规则：

#tools{ border: 1px solid black; }

button{
    border-width: 2px;
    border-style: outset;
    border-color: #ccc;

    height: 48px;
    width: 48px;

    font-size: 24pt;
    vertical-align: baseline;
}
button:active{
    border-style: inset;
}

button.Bl { font-weight: bold; }
button.Bo { font-style: italic; }
button.B4{
    background-color: #A00;
    text-shadow: 0.15em 0.15em #2A0000;
}
button.Bc{
    background-color: #F55;
    text-shadow: 0.15em 0.15em #3F1515;
    height: auto;
}
button.ExA {}
button.Ex0 {
    height: auto;
    font-size: 0;
}

这里我们有六个内联元素，所有按钮，形成一个线框，如下所示：

enter image description here

浏览器将计算每个内联元素的高度，然后使用垂直对齐属性（默认为基线）将它们相互对齐。

在前两个方框和最后两个方框的情况下，有一个字符具有指定字体大小的内容，在此示例中为24pt（对于0pt执行，我将在稍后解释）。

在这种情况下，第1，第5和第6个框的行为与预期的一样，三个字母是垂直对齐共同基线。

第3个和第4个按钮没有字符，因此内联框的高度计算为零（行高仅适用于文本）。在第3个按钮，按钮具有固定的高度，因此浏览器垂直地将元素与基线对齐高度的一半高于基线，一半低于基线。这更明显如果你为第4个按钮设置height: auto，这会将元素缩小到零高度（边框除外），我们看到0 +边距元素对齐与共同的基线。

要确认该行为，请考虑第二个按钮，该按钮具有一个字符，并height: auto 和font-size: 0。在这种情况下，零字体大小会强制内联框高度缩小到零，高度缩小到零（和边框宽度）。

因此，没有文字的按钮相当于一个文本显示为零的按钮字体高度。

CSS规范隐含了所有这些行为：

http://www.w3.org/TR/CSS2/visudet.html#line-height

您需要仔细阅读这些章节以弄清楚其含义。

请参阅演示：http://jsfiddle.net/audetwebdesign/0jm8th00/

Answer 2

将这两行添加到#tools button

display: inline-block;
vertical-align: bottom;

Answer 3

在CSS中：

在vertical-align:top;

中添加#tools button{ }

Answer 4

我不知道为什么，但快速修复是插入一个不间断的空间：

<button class="B4 pallete" title="Dark Red">&nbsp;</button>

虽然CSS解决方案是推荐的方式。

Answer 5

我试图找出这一个......我确信这与line-height有关，但还是想不通。

无论如何，基于RedEyedMonster提出的 解决方案，我想出了一种css方法来识别任何空内容button，并在其中添加一个空格......它修复了问题：

button:empty:after {
    content: "\0000a0";
}

Updated Fiddle

修改

Google论坛上的
This discussion似乎正在处理按钮标记元素上的额外填充 ...

为什么空按钮与具有文本的按钮不对齐？

5 个答案: