I set height:
input,select{height: 20px;}
but in browser it height is input : 20px
and select 18px
, I dont know why because before input and select was reseted. If I remove <!DOCTYPE html>
then is ok, but then IE not centering page.
This can be corrected by setting the box-sizing
property of your elements to border-box
:
input, select{
box-sizing: border-box;
}
Vendor specific prefixes like moz-
or webkit-
might apply.
I was able to set the height of my SELECT
to exactly what I wanted in IE8 and 9. The trick is to set the box-sizing
property to content-box
. Doing so will set the content area of the SELECT
to the height, but keep in mind that margin
, border
and padding
values will not be calculated in the width/height of the SELECT
, so adjust those values accordingly.
select {
display: block;
padding: 6px 4px;
-moz-box-sizing: content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
height: 15px;
}
Here is a working jsFiddle. Would you mind confirming and marking the appropriate answer?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With