HTML 输入类型图像仅在 Chrome 中被截断

Question

我使用设置为图像的输入元素设置了一些投票按钮，以显示图标。

这是我的 HTML:

<div id="bottomBarControls">

<form id="voteDownForm" action="index.php?ajax=vote" method="post">

  <input type="hidden" name="castVote">

  <input type="hidden" name="clippetID" value="@clippetID">

  <input type="hidden" name="downvote">

  <input id="voteDownButton" type="image" src="images/icons/@downvoteStatus.png" alt="downvote" name="downvote" value="Downvote">

</form>

</div>

我的 CSS:

#voteUpForm, #voteDownForm
{
  display: inline-block;
}

#voteUpButton, #voteDownButton
{
  height: 32px;
  width: auto;
  margin-right: 7px;
  display: block;
}

#bottomBarControls
{
  display: flex;
  align-items: center;
}

#voteCounter
{
  display: inline-block;
}

#views
{
  display: inline-block;
}

结果如下:

如您所见，向上和向下按钮在底部和右侧被截断，这只发生在 Chrome 中，我在 edge 和 firefox 中测试它并且显示正常。它也对普通的 img 标签做同样的事情。

Answer 1

我通过将图标设为 32 x 32 而不是使用 CSS 缩小图标来解决这个问题，之后一切正常。