Почему межстрочный интервал не работает в Fx <10

Question

Я использую Fx 9, и мой следующий код ломается в нем, пока он работает во всех других браузерах, включая IE9.

EDIT Обратите внимание, что я просто хочу знать об этом конкретном кодеЯ не интересуюсь тем, как на самом деле выполнить работу, потому что я изучаю 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

Добавить position: absolute; к .sbutton. Это желаемый результат?

Answer 3

Зачем вообще использовать 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/