7

我在尝试设置内部没有文本、只有字体图标的按钮时遇到了一个有趣的 HTML 按钮标记行为——没有文本的按钮会导致所有后续按钮都被按下，这些按钮确实有文本。该问题仅在按钮具有height指定属性时出现。

JSFiddle

<header>
    <button><!-- No text here --></button>
    <button>This button is pushed down</button>
</header>

button { height: 40px; }

起初我确信这是由于第一个按钮内的字体图标做了一些奇怪的基线魔术，但正如您从最小的工作示例中看到的那样，当按钮内根本没有内容时，行为会保持不变。

我可以通过向第一个按钮添加内容来解决这个问题，但是因为我唯一的内容是 a <span class="icon user"></span>，它是一个字体图标，它实际上会干扰字体基线，并且将按钮定位在几个像素之外。这就是为什么我决定将图标绝对定位在里面，这解决了最初的轻微定位问题，但引入了这个新问题，因为按钮现在就像是空的一样。

所以，问题仍然存在——如何避免空按钮的定位问题？

注意：似乎上述情况只发生在 webkit 浏览器上；Firefox 正确放置带有文本的按钮，但会将空的按钮向上推。

4

2 回答 2

13

这是因为button是一个inline元素，默认与基线对齐。

来自W3C：

将框的基线与父框的基线对齐。如果框没有基线，则将底部边距边缘与父项的基线对齐。

为了正确对齐它们，请使用vertical-align: top; (Or middle,bottom作为值)

button { 
    height: 40px;
    margin-left: 5px; 
    vertical-align: top;
}

演示

另一方面，您也可以使用零宽度空间实体&#8203;- Demo

这种行为在inlineandinline-block元素中很常见，如果你想避免上面的所有内容，你可以float在这里使用，而不是你不需要该vertical-align属性，因为这float将强制button内联以及块级别

演示 （使用float: left;）

注意：如果您要使用float，请确保清除它们，如果您不确定是什么clear意思，请参考我的答案 here，它将详细解释。

于 2014-02-08T12:00:06.240 回答
1

向按钮添加文本并将文本缩进屏幕之外。这将解决您的问题并帮助您的 SEO，因为索引您的网站的机器人可以注册文本，但不能注册图像的内容。

button{
    width:;
    height:;
    display:block;
    text-indent:-9999px;
}
于 2014-02-08T12:11:57.737 回答