Html CSS：Chrome 中按钮的大小与 Firefox 不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2954659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Size of buttons in Chrome is different than Firefox
提问by Hank
I have the following HTML code:
我有以下 HTML 代码：
<style type="text/css">
.submitbutton{margin-left:-2px;padding:1px}
</style>
...
<form>
...
<input class=submitbutton type=submit value="Create Listings" />
</form>
In Firefox, the input button has more padding than in Chrome.
在 Firefox 中，输入按钮比 Chrome 中的填充更多。
Any ideas why?
任何想法为什么？
UPDATE: If you're wondering why I have the negative margin - it's because between the input field and the input button - there is too much space.
更新：如果你想知道为什么我有负边距 - 这是因为在输入字段和输入按钮之间 - 有太多空间。
回答by Jeaf Gilbert
/* Remove button padding in FF */
button::-moz-focus-inner {
border:0;
padding:0;
}
You'll get the same button appearance in Chrome and Firefox.
您将在 Chrome 和 Firefox 中获得相同的按钮外观。
回答by John K
Even though you as a developer test in different browsers and see the difference in buttons, the user will not. It's too easy to get focused on things that users won't notice: the user likely has either Firefox or else IE or else Chrome, but not all of them. Rarely do users ever switch browsers over time let alone switch between them and complain about a few pixels diff.
即使您作为开发人员在不同的浏览器中测试并看到按钮的差异，用户也不会。专注于用户不会注意到的事情太容易了：用户可能拥有 Firefox、IE 或 Chrome，但不是全部。随着时间的推移，用户很少切换浏览器，更不用说在它们之间切换并抱怨几个像素差异。
So if you consider the buttons and the experience in just one browser at a time, and if it works well in that experience/browser, then don't bother spending more time. Instead move onto next steps.
因此，如果您一次只考虑一个浏览器中的按钮和体验，并且如果它在该体验/浏览器中运行良好，那么就不要花更多时间了。而是继续下一步。
This doesn't answer 'why' but somebody else explained that one.
这并没有回答“为什么”，但其他人解释了那个。
回答by corroded
form elements render differently(as defaults) depending on the OS and/or browser. if you want your form elements(input fields, submit buttons, etc.) to look the same in all instances, you have to explicitly style them using borders, paddings and margins.
表单元素根据操作系统和/或浏览器呈现不同（默认）。如果您希望您的表单元素（输入字段、提交按钮等）在所有情况下看起来都相同，您必须使用边框、填充和边距明确地设置它们的样式。
回答by Firdaus Rudy
Try this
尝试这个
/* Browser Firefox to match the Chrome */
#buttonid::-moz-focus-inner, .buttonclass::-moz-focus-inner, button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
回答by Jacob
The thing that no one is mentioning here is that Chrome resets the CSS for these elements:
这里没有人提到的是 Chrome 重置了这些元素的 CSS：
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button
So no matter what you set the padding to, as far as I can tell, it will be overridden by Chrome. I have tried using !importantas well as other techniques and still no luck. If anyone has any insight into this I would love to know.
因此，无论您将填充设置为什么，据我所知，它都会被 Chrome 覆盖。我已经尝试使用!important以及其他技术，但仍然没有运气。如果有人对此有任何见解，我很想知道。
回答by MeHere
Try to use -webkit-box-sizing:content-box, then read about box-models.
尝试使用-webkit-box-sizing:content-box，然后阅读有关盒模型的信息。
回答by Mela
I've tried now to modify height and padding in the same time.
我现在尝试同时修改高度和填充。
The result it's quite good. Seems to be correct for both browsers (FF and Chrome in Linux)... for example i've put:
结果还算不错。似乎对两种浏览器都是正确的（Linux 中的 FF 和 Chrome）......例如我已经把：
.classname {
height:20px;
padding:4px;
}
Maybe it's just my lucky day... however you can try it.
也许这只是我的幸运日……不过你可以试试。
回答by Steven Lizarazo
To get the same size on both browser you have to set the same initial values to all the CSS elements, like a reset.
要在两个浏览器上获得相同的大小，您必须为所有 CSS 元素设置相同的初始值，例如重置。
This is how I fixed the problem: put this at the beginning of your css file
这就是我解决问题的方法：将其放在 css 文件的开头
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, a
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width-value: 0px;
border-bottom-width: 0px;
border-left-width-value: 0px;
}
Now you have to fix some aspect changes on your page but it will look almost the same on all the browsers.
现在您必须修复页面上的某些方面更改，但它在所有浏览器上看起来几乎相同。
