我已經設置了一些使用輸入元素設置爲圖像的投票按鈕來顯示圖標。HTML僅在Chrome中被切斷的輸入類型圖像
這裏是我的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中,我在ed中進行了測試ge和firefox,它顯示正常。它也與正常的img標籤一樣。