Geek Answers Handbook

Why is the Firefox button bigger?

.ui_btn , .sub_txt { margin: 2px 0px 2px 3px; background:#181c18; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; text-transform:lowercase; } .ui_btn input, .sub_txt input , .disabled input{ border-spacing: 0px; background: none; color: #fff; outline:0!important; margin:0!important; cursor: pointer; display: inline-block; font-weight: bold; border: 1px solid #181c18; font-family: Arial, sans-serif; font-size: 11px; padding: 7px 6px!important; white-space: nowrap; text-transform:lowercase; line-height: 12px!important; }

And this is my button:

 <label id="SD_mrs_t" class="ui_btn" for="SD_mrs"> <input id="SD_mrs" value="More Specific" type="button"/> </label>

As a result, the button in Firefox has something like:

 padding: 9px 8px!important;

Is there any solution without defining special parameters for the Mozilla browser?

+8
html css
source share
3 answers

Firefox uses a special button addition that you can set as follows:

 button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { padding: 0 !important; border: 0 none !important; }
+22
source share

In Firefox, the enter button has more additions, this can help solve it:

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

In addition, this question seems more or less the same (the code above is suggested there): CSS: the size of buttons in Chrome is different from Firefox

+9
source share

If you use reset.css in the stylesheet, it can set default values ​​for all browsers at startup, then the firefox button will not be anymore. I use this one:

http://meyerweb.com/eric/tools/css/reset/

-one
source share

More articles:


All Articles