IE10 font size is off by 1px. How to fix? - html

Question

Because it is just 1px I can't tell if it is the text box next to the button or the button itself. So I was going to take a screenshot and look at it with a measuring tool. From there I was going to look the firefox debugger and ie debugger to see what is off by 1px.
However I was hoping someone might have an idea to what is causing this.
Here is the offending element in ie ( 28 px )
Here is where it is correctly displayed in FF, Chrome, etc. ( 27 px )
http://www.arcmarks.com
Here is the CSS for the button:
#ue_but_new{
position: absolute;
padding: 8px 6px 7px 6px;
text-decoration: none;
cursor: pointer;
}
p.small_white{
font-size: 10px;
color: #ffffff;
}
.blue_but{
color: #ffffff;
border: 1px solid #057ed0;
background: -moz-linear-gradient(top, #31baed, #019ad2);
}

Answer 1

If you base element size on text size, it will always vary between different browsers, different systems, different settings, et.c.
Set a specific line height on the element instead of padding from the text height:
#ue_but_new{
position: absolute;
line-height: 25px;
padding: 0 6px;
text-decoration: none;
cursor: pointer;
}

Answer 2

You could try to apply border on the input & button wrapper, then set overflow:hidden.
This way, even if it's off by a pixel, it's not visible.
In HTML:
<div>
<input type="" />
<button></button>
</div>
In CSS (roughly):
div {
border:1px solid #ccc;
border-radius:3px;
background:#fff;
overflow:hidden;
}
input {
border:0;
background:transparent;
}
button {
background:blue;
}
div, input, button { height:22px; }

Answer 3

Prefer setting the line-height property to vertically center a single line of text rather than using padding-bottom and padding-top.
In your case font-size: 10px + padding-top: 8px + padding-bottom: 7px = line-height: 25px.
#ue_but_new {
position: absolute;
padding: 0 6px;
line-height: 25px;
text-decoration: none;
cursor: pointer;
}