html - 为什么字母间距在 Fx <10 中不起作用

Question

我正在使用 Fx 9，当它在包括 IE9 在内的所有其他浏览器中工作时，我的以下代码在其中中断。

编辑请注意，我只想了解这个特定的代码破坏，对如何实际完成工作不感兴趣，因为我正在学习 CSS，而不是为任何客户工作。

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

测试用例的行为将取决于用户设置的精确字体大小和使用的字体。它还将取决于 UA 决定如何处理负字母间距；该规范允许它被限制或完全忽略。来自 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.