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

Question

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

这是我的HTML：

DoWork

我的CSS：

<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>

结果如下：

正如您所看到的那样，向上和向下按钮在底部和右侧被切断，这只发生在Chrome中，我在边缘和Firefox中进行了测试，它显示正常。它也可以用普通的img标签做同样的事情。

Answer 1

我通过将图标设置为32 x 32并且不使用CSS来缩小它们来解决这个问题，之后一切都很好。

Answer 2

不同的浏览器有不同的默认样式。如果您没有设置每个属性，差异可能会蔓延。

为了解决这个问题，许多网络平台使用CSS reset script并在其上放置样式。