Why does the jquery ui button look different in Firefox and Chrome

Question

I downloaded the sample page https://bobdn.com/Temp.aspx .

There is only one jquery user interface on this page.

Why it looks a little big in firefox. Indentation and font size look large. It looks great in chrome.

How can I make it equal in size (padding, font, etc.) for both browsers.

Answer 1

I assume this is an inconsistent mapping of the <input> element. I can verify that the rendering is incompatible between each browser with a 2px height difference.

If you can use the <button> element, you may find that it displays the browser more consistently from the browser, although you will likely have to adjust the add-on yourself.

This is done, you need to try to set any of the appropriate styles explicitly, and not rely on the default values. These include: line height, padding, font size, border width, and possibly more. Each browser has its own default values. If you want consistency, you must provide css that replaces the default values.

Answer 2

I fixed this problem by setting default values ​​explicitly.
Ex. I created a CSS class with input.navigation_button with the addition: 2px (Chrome had a zero addition on my buttons).