Html 为什么字母间距不'；我不在外汇市场工作<；10

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

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

HTML

---

为什么要在那里使用

字母间距

？我看不出这个决定背后的逻辑。
我认为您可能需要重新编写代码，尝试类似的东西，它更干净，应该可以在所有浏览器中使用，IE8+就可以了。根据您的需要进行调整：

html

<form id="sform" action="index.htm">
    <input class="sfield" type="text" value="Search..." />
    <input class="sbutton" type="button" value="Go" />
</form>

说明：

字母间距增加或减少文本中字符之间的间距，似乎您正在使用它添加填充。
然后，相对于第一个父元素定位绝对位置元素，该父元素的位置不是静态的。
尝试删除所有

字母间距

，您将看到布局中的更改非常小。 看一看我的例子，从逻辑上你会明白它为什么有效

示例：

---

添加

位置：绝对至
.sbutton
。
这是期望的结果吗？
测试用例的行为将取决于用户设置的精确字体大小和使用的字体。这还取决于UA决定如何处理负号间距；规范允许对其进行封顶或完全忽略。发件人：

除了字符之间的默认间距外，该值还指示字符之间的间距。值可能为负值，但可能存在特定于实现的限制

谢谢但是，我想知道为什么CSS会出问题。是的，这是我想要的结果。但为什么需要将position:absolute放在FX中才能让它在所有其他浏览器中工作呢？我对学习这一点很感兴趣。不同的浏览器使用不同的渲染引擎。我不能告诉你在这个例子中谁是对的（Firefox或其他），你必须看看标准才能找到答案。所以“为什么”的答案是：要么是Firefox做错了，要么是其他人做错了。我不确定你说的代码中断是什么意思。我的意思是，这个按钮没有保持在一行并被推到下一行。我无法解释为什么你对字母间距的使用没有达到你想要的效果，因为这是一种非常不寻常的尝试实现你想要的目标的方式我们正在努力实现这一目标。我知道你不是在寻找解决方案，但这是我应该做的。我不是在寻找解决方案，而是学习有助于我自己找到解决方案的基本推理
#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;
}

<form id="sform" action="index.htm">
    <input class="sfield" type="text" value="Search..." />
    <input class="sbutton" type="button" value="Go" />
</form>

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