html – 没有文本的按钮元素导致后续按钮定位错误

概述我在尝试设置一个内部没有文本的按钮时,遇到了一个有趣的 HTML按钮标记行为,只有一个字体图标 – 没有文本的按钮会导致所有后续按钮都按下文本.仅当按钮指定了height属性时才会出现此问题. JSFiddle <header> <button><!-- No text here --></button> <button>This button is pushed down</bu 我在尝试设置一个内部没有文本的按钮时,遇到了一个有趣的 HTML按钮标记行为,只有一个字体图标 – 没有文本的按钮会导致所有后续按钮都按下文本.仅当按钮指定了height属性时才会出现此问题.

JSFiddle

<header>    <button><!-- No text here --></button>    <button>This button is pushed down</button></header>button { height: 40px; }

起初我确信这是由于第一个按钮内部的字体图标做了一些奇怪的基线魔术,但正如你从最小的工作示例中看到的那样,当按钮内部根本没有内容时,行为就会得到维护.

我可以通过向第一个按钮添加内容来解决此问题,但由于我的唯一内容是< span class =“icon user”>< / span&gt ;,这是一个字体图标,它实际上会干扰字体基线,并将按钮放置几个像素.这就是为什么我决定将图标置于绝对位置,这会修复原始的轻微定位问题,但会引入这个新的,因为按钮现在就像是空的一样. 所以,问题仍然存在 – 如何避免使用空按钮定位问题？ 注意：似乎以上只发生在webkit浏览器上; firefox正确地定位了带有文本的按钮,但是将空的按钮向上推.

解决方法 这是因为按钮是内联元素,默认情况下与基线对齐.

从W3C开始：

Align the baseline of the Box with the baseline of the parent Box. If
the Box does not have a baseline,align the bottom margin edge with
the parent’s baseline.

为了正确对齐它们,请使用vertical-align：top; (或中间,底部作为值)

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

Demo

另一方面,您也可以使用零宽度空间实体​ – Demo

这种行为在内联和内联块元素中很常见,如果你想避免上面的所有内容,你可以在这里使用float,而不需要vertical-align属性,因为float会强制按钮内嵌以及阻塞水平

Demo(使用float：left;)

Note: If you are going with float,just make sure you clear them,if you aren’t sure what clear means,than refer my answer 07005 which will explain in detail.

总结

以上是内存溢出为你收集整理的html – 没有文本的按钮元素导致后续按钮定位错误全部内容，希望文章能够帮你解决html – 没有文本的按钮元素导致后续按钮定位错误所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。