Fx <10에서 문자 간격이 작동하지 않는 이유

Question

IE9를 포함한 다른 모든 브라우저에서 작동하는 동안 Fx 9 및 다음 코드가 손상됩니다.

편집 난 그냥이 특정 코드 나 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

왜 어쨌든 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; 
} 

설명 : 여러분의 필요에 조정

문자 간격 증가 또는 텍스트에서 문자 사이의 간격을 감소시키고 너는 미국인 인 것 같아. 패딩을 추가하십시오.
그런 다음 절대 위치 요소는 static 이외의 위치에있는 첫 번째 부모 요소를 기준으로 배치됩니다.
letter-spacing을 모두 삭제 해보세요. 레이아웃 변경 사항이 최소화되어 있습니다. 내 예제를 살펴보고 논리를 통해 작동 원리를 이해할 수 있습니다.

예 :

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

Answer 2

이 .sbutton에 position: absolute;를 추가합니다. 그게 원하는 결과입니까?

Answer 3

테스트 케이스의 동작은 사용자가 설정 한 정확한 글꼴 크기와 사용되는 글꼴에 따라 달라집니다. 또한 UA가 음의 문자 간격을 처리하기로 결정하는 방법에 달려 있습니다. spec을 사용하면이를 모두 제한하거나 무시할 수 있습니다. http://www.w3.org/TR/CSS21/text.html#spacing-props에서 :

이 값은 문자 사이의 기본 공간에 추가 문자 간 공간 을 나타냅니다. 값은 음수 일 수 있지만 구현 관련 제한이있을 수 있습니다.