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でのみ発生し、私はedでテストしましたgeとfirefoxとそれはうまく表示されます。また、通常のimgタグでも同じことが行われます。

Answer 1

アイコンをネイティブに32x32に変更し、CSSを使用せずに縮小して解決しましたが、それ以降はすべて問題ありません。

Answer 2

さまざまなブラウザのデフォルトスタイルが異なります。

これに対処するため、多くのWebデッキはCSS reset scriptを使用し、その上にスタイルを配置しています。