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

Question

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

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

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

如何使两个浏览器的大小相等(填充、字体等)。？？

Answer 1

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

如果您可以改用<button>元素，您可能会发现它在不同的浏览器中呈现得更加一致，尽管您很可能需要自己调整填充。

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

Answer 2

我通过显式设置默认值修复了这个问题。

例如。我创建了一个Chrome类，padding:2px ( input.navigation_button的按钮没有填充)。