html时候错误按钮怎么不管用,html – 没有文本的按钮元素导致后续按钮定位错误...

我在尝试设置一个内部没有文本的按钮时,遇到了一个有趣的

HTML按钮标记行为,只有一个字体图标 – 没有文本的按钮会导致所有后续按钮都按下文本.仅当按钮指定了height属性时才会出现此问题.

This button is pushed down

button { height: 40px; }

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

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