为什么jquery UI按钮在Firefox和Chrome中看起来不同 [英] Why jquery ui button looks different in Firefox and Chrome

问题描述

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

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

为什么在firefox中这个看起来不大。
填充和字体大小都很大。
在Chrome浏览器中看起来很好。

这两个浏览器如何使其大小相同（填充，字体等）？ $ b

解决方案

我猜这是< input> 元素的不一致呈现。如果您可以使用<按钮> ，则可以验证每个浏览器之间的呈现不一致， code>元素，您可能会发现它从浏览器到浏览器呈现更一致，尽管您很可能必须自己调整填充。

您需要尝试明确地设置任何相关的样式，而不是依靠默认值。
这包括：行高，填充，字体大小，边框宽度，也许更多。
每个浏览器都有自己的默认值。
如果要保持一致性，则必须提供替代默认值的css。

I have uploaded an example page https://bobdn.com/Temp.aspx.

This page has just a single jquery UI button.

Why does this look little large in firefox. Padding and font-size both look large. It looks fine in chrome.

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

解决方案

My guess it that it's inconsistent rendering of the <input> element. I can verify that the rendering is inconsistent between each browser, with a 2px height difference.

If you can use a <button> element instead, you may find that it renders more consistently from browser to browser, although you will most likely have to adjust padding yourself.

That done, you need to try setting any of the relevant styles explicitly, rather than relying on defaults. This includes: line-height, padding, font-size, border-width, and perhaps more. Every browser has it's own defaults. If you want consistency, you must provide css that replaces the default values.

这篇关于为什么jquery UI按钮在Firefox和Chrome中看起来不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！