Firefox/safari Setting Height As [specified Height - Padding - Border] For Input[type=button]
Solution 1:
Form elements have traditionally had a width/height that includes their padding/border, because they were originally implemented by browsers as OS-native UI widgets, where CSS had no influence over the decorations.
To reproduce this behaviour, Firefox and others render some form fields (select, button/input-type-button) with the CSS3 box-sizing style set to border-box, so that the width property reflects the entire rendered area width including the border and padding.
You can disable this behaviour with:
select, button {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
(or, which is more common for liquid form layouts where you want to use ‘100%’ width, you can set the others to border-box.)
The -browser prefixed versions have to be there to catch browsers that implemented this before the standardisation process got so far. This will be ineffective on IE6-7, though.
Solution 2:
A few things you can try:
- Set the doctype of the document (
<!DOCTYPE html>) - Set the input to be
display:blockordisplay: inline-block - Use a reset stylesheet.
Solution 3:
It makes sense because the height of the element is naturally more than what you set it to. input elements are assigned a height which, in this case, should be enough to contain the text of your element but you set it to a smaller amount. To show this, remove your height setting.
Solution 4:
I got it working removing the padding of the input button and setting a height around 20. then adjusting the height, padding of the anchor element. I Also set the line-height, font-size and the font-family.
worked on FF,IE,safari and chrome :D
Post a Comment for "Firefox/safari Setting Height As [specified Height - Padding - Border] For Input[type=button]"