サンプルページ https://bobdn.com/Temp.aspxをアップロードしました 。
このページには、jquery UI ボタンが 1 つだけあります。
これがFirefoxで少し大きく見えるのはなぜですか。padding と font-size の両方が大きく見えます。クロムできれいに見えます。
両方のブラウザで同じサイズ (パディング、フォントなど) にするにはどうすればよいですか??
サンプルページ https://bobdn.com/Temp.aspxをアップロードしました 。
このページには、jquery UI ボタンが 1 つだけあります。
これがFirefoxで少し大きく見えるのはなぜですか。padding と font-size の両方が大きく見えます。クロムできれいに見えます。
両方のブラウザで同じサイズ (パディング、フォントなど) にするにはどうすればよいですか??
要素の一貫性のないレンダリングだと思い<input>
ます。高さの差が 2px で、各ブラウザー間でレンダリングに一貫性がないことを確認できます。
代わりに要素を使用できる場合は<button>
、ブラウザー間でより一貫してレンダリングされることがわかる場合がありますが、パディングを自分で調整する必要がある可能性が高くなります。
それが完了したら、デフォルトに依存するのではなく、関連するスタイルを明示的に設定してみる必要があります。これには、line-height、padding、font-size、border-width などが含まれます。すべてのブラウザには独自のデフォルトがあります。一貫性が必要な場合は、デフォルト値を置き換える css を提供する必要があります。
デフォルトを明示的に設定することで、この問題を修正しました。
元。padding:2pxを使用してinput.navigation_button CSSクラスを作成しました(Chromeのボタンのパディングはゼロでした)。