blocks|key|1233870|text|根据操作系统和/或浏览器的不同，表单元素呈现方式不同(默认)。如果需要表单元素(输入域、提交按钮等)要在所有情况下看起来都一样，您必须使用边框、填充和边距显式地设置样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1233871|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1233929|text|即使您作为开发人员在不同的浏览器中测试并看到按钮的差异，用户也看不到。人们很容易将注意力集中在用户不会注意到的事情上:用户可能使用Firefox或IE或Chrome，但不是全部。用户很少随着时间的推移切换浏览器，更不用说在浏览器之间切换并抱怨几个像素的差异了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1233930|因此，如果你一次只考虑一个浏览器中的按钮和体验，并且如果它在该体验/浏览器中运行良好，那么就不要费心花费更多的时间。取而代之的是进入下一步。|1233931|这没有回答“为什么”，但其他人解释了这一点。|1233932|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

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.

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.

blocks|key|1019241|text|这里没有人提到的一件事是Chrome重置了这些元素的CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019242|input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button|code-block|syntax|javascript|1019243|所以不管你把填充设置成什么，据我所知，它都会被Chrome覆盖。我尝试过使用!important和其他技术，但仍然一无所获。如果有人对此有任何见解，我很想知道。|offset|length|style|CODE|1019244|entityMap^0|0|0|12|A|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

The thing that no one is mentioning here is that Chrome resets the CSS for these elements:

<pre><code>input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button
</code></pre>

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 <code>!important</code> as well as other techniques and still no luck. If anyone has any insight into this I would love to know.

blocks|key|1019301|text|/*+Remove+button+padding+in+FF+*/
button::-moz-focus-inner+{
++++border:0;
++++padding:0;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1019302|在Chrome和Firefox中，你会看到相同的按钮外观。|unstyled|1019303|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>/* Remove button padding in FF */
button::-moz-focus-inner {
 border:0;
 padding:0;
}
</code></pre>

You'll get the same button appearance in Chrome and Firefox.

blocks|key|1234025|text|尝试使用-webkit-box-sizing:content-box，然后阅读有关盒子模型的内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1234026|entityMap^0|4|U|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Try to use <code>-webkit-box-sizing:content-box</code>, then read about box-models.

blocks|key|1234049|text|我现在已经尝试在同一时间修改高度和填充。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1234050|结果相当不错。似乎对两种浏览器都是正确的(Linux中的FF和Chrome+)……例如，我已经添加了：|1234051|.classname+{
height:20px;
++++padding:4px;
}|code-block|syntax|javascript|1234052|也许今天是我的幸运日..。不过，您可以尝试一下。|1234053|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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:

<pre><code>.classname {
height:20px;
 padding:4px;
}
</code></pre>

Maybe it's just my lucky day... however you can try it.

blocks|key|1234096|text|要在两个浏览器上获得相同的大小，您必须为所有CSS元素设置相同的初始值，如重置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1234097|这就是我修复这个问题的方法:将以下代码放在css文件的开头|1234098|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;
++++}|code-block|syntax|javascript|1234099|现在，您必须修复页面上的一些方面更改，但它在所有浏览器上看起来几乎是一样的。|1234100|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To get the same size on both browser you have to set the same initial values to all the CSS elements, like a reset.

This is how I fixed the problem:
put this at the beginning of your css file

<pre><code>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;
 }
</code></pre>

Now you have to fix some aspect changes on your page but it will look almost the same on all the browsers.

blocks|key|1019395|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019396|/*+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;
}|code-block|syntax|javascript|1019397|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this

<pre><code>/* 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;
}
</code></pre>

I have the following HTML code:

<pre><code>&lt;style type="text/css"&gt;
.submitbutton{margin-left:-2px;padding:1px}
&lt;/style&gt;
...
&lt;form&gt; 
... 
&lt;input class=submitbutton type=submit value="Create Listings" /&gt; 
&lt;/form&gt;
</code></pre>

In Firefox, the input button has more padding than in 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.

CSS: Size of buttons in Chrome is different than Firefox

Linux

我有以下HTML代码：<style type="text/css">.submitbutton{margin-left:-2px;padding:1px}</style>...<form> ... <input class=submitbutton type=submit value="Create Listings"...

问CSS: Chrome中按钮的大小不同于Firefox
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS: Chrome中按钮的大小不同于FirefoxEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS: Chrome中按钮的大小不同于Firefox
EN