Firefox / IE Padding / Margin Fix
beautiful people,
For life, I have been unable to get my buttons to format properly in IE and Firefox using Bootstrap. I've looked around people with similar problems here, but I can't seem to lick this. Any help would be greatly appreciated. I made this site in MeteorJS in case you provided any information to you:
* It works great in Chrome, Safari, iOS devices ...
source to share
I made a smaller version of your form. My method for solving this problem is to use Firefox's line-height as a basis for applying styles. By default, this is ok that I remember.
So using this you don't need to set the line-height and height to fit this, this was the most consistent cross-browser solution for me without any oddities.
I am using prefixed appearance rules as it removes all default browser styles applied to that element. This is especially true in Mobile Safari.
http://codepen.io/stevemckinney/pen/CLgdE
input {
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: #EFEFEF;
}
input,
.btn {
line-height: normal;
padding: 10px;
}
.btn {
text-decoration: none;
}
.btn-primary {
background: #820024;
color: white;
}
Hope this helps.
source to share