Why letter-spacing doesn't work in Fx <10 - html

Question

I am using Fx 9 and my following code breaks in it while it works in all other browsers including IE9.
EDIT
Please note that I just want to know about this particular code breaking not interested in how to actually get work done because I am learning CSS not doing work for any client.
HTML
<form id="sform" action="index.htm">
<input class="sfield" type="text" value="Search..." />
<input class="sbutton" type="button" value="Go" />
</form>
CSS
#sform {
display:inline-block;
border: solid 1px #d2d2d2;
padding: 10px 10px;
border-radius: 2em;
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
letter-spacing: -4px;
}
:not(#sform){
letter-spacing: -4px;
}
.sfield {
padding: 6px 35px 6px 8px;
border: solid 1px #bcbbbb;
width: 202px;
border-radius: 2em;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.sbutton {
color: #fff;
background: #5f5f5f;
margin-left: -52px;
border: solid 1px #494949;
height: 27px;
width: 27px;
border-radius: 2em;
}
http://jsfiddle.net/UfK6K/8/

Answer 1

The behavior of your testcase will depend on the precise font size the user has set and the font that gets used. It will also depend on how the UA decides to handle negative letter spacing; the spec allows it to be capped or ignored altogether. From http://www.w3.org/TR/CSS21/text.html#spacing-props :
This value indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits.

Answer 2

Add position: absolute; to .sbutton.
Is that the desired outcome?

Answer 3

Why use letter-spacing there anyway? I don't see the logic behind this decision.
I think you may have to rework that code, try with something like this, it's cleaner and it should work in all browsers, IE8+ just fine. Adjust to your needs:
html
<form id="sform" action="index.htm">
<input class="sfield" type="text" value="Search..." />
<input class="sbutton" type="button" value="Go" />
</form>
css
#sform, .sfield, .sbutton {
border-radius: 100px;
padding: 10px;
}
#sform {
position: relative;
display: inline-block;
background: #999;
border-radius: 100px;
}
.sfield {
border: 1px solid #999;
width: 300px;
}
.sbutton {
position: absolute;
right: 10px;
border: 0;
background: black;
color: white;
}
explanation:
Letter spacing increases or decreases the space between characters in a text and it seems you're using it to add padding.
Then, an absolute position element is positioned relative to the first parent element that has a position other than static.
Try removing all your letter-spacing and you'll see that the changes in the layout are minimal.
Take a look at my example and by logic you'll figure it out why it works.
example:
http://jsfiddle.net/elclanrs/7KGkJ/1/