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：

除了字符之间的默认空格外，此值还指示字符间空间。值可能是负数，但可能存在特定于实现的限制。

Answer 2

为什么还要使用letter-spacing？我没有看到这个决定背后的逻辑我认为你可能不得不重做那些代码，尝试使用类似的东西，它更干净，它应该适用于所有浏览器，IE8 +就好了。根据您的需求调整：

<强> 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;
}

<强>解释

字母间距会增加或减少文字中字符之间的间距，而您似乎正在使用它来添加填充然后，绝对位置元素相对于具有静态位置的第一父元素定位尝试删除所有letter-spacing，您会发现布局中的更改很少。看看我的例子和逻辑，你会弄明白它的工作原理。

示例：

http://jsfiddle.net/elclanrs/7KGkJ/1/

Answer 3

将position: absolute;添加到.sbutton。这是期望的结果吗？

为什么字母间距在Fx＆lt; 10中不起作用

3 个答案: