为什么jquery ui按钮在Firefox和Chrome中看起来有所不同

Question

我上传了一个示例页面 https://bobdn.com/Temp.aspx

此页面只有一个jquery UI按钮。

为什么这在firefox中看起来有点大。 填充和字体大小都很大。 它看起来很好用铬。

如何为两个浏览器设置相同的大小（填充，字体等）。??

Answer 1

我猜它是<input>元素的渲染不一致。我可以验证每个浏览器之间的渲染是否不一致，高度差为2px。

如果您可以使用<button>元素，您可能会发现它从浏览器到浏览器的呈现更加一致，尽管您很可能必须自己调整填充。

完成后，您需要尝试显式设置任何相关样式，而不是依赖于默认值。 这包括：行高，填充，字体大小，边框宽度，或许更多。 每个浏览器都有自己的默认值。 如果需要一致性，则必须提供替换默认值的css。

Answer 2

我通过明确设置默认值来修复此问题 防爆。我用padding创建了一个input.navigation_button CSS类：2px（我的按钮上的Chrome填充为零）。