Firefox 텍스트 입력은 글자의 밑줄을 자릅니다.

g, y, j와 같은 글자 아래에있는 글자는 Firefox 3.6에서만 잘립니다. Firefox 텍스트 입력은 글자의 밑줄을 자릅니다.

내 구글 - Fu는

enter image description here

<input type="text" value="yyyy gggg xxxx" style="height: 1em;" />

은 날 완전히 실패합니다. 간단한 문제. 나는 간단한 해결책이 있다고 상상한다.

출처

2011-03-21 mrtsherman

'height : 1.2em'을 할 수는 없습니까? http://jsfiddle.net/yqTjX/7/ – thirtydot

클라이언트는 작은 입력 상자를 좋아합니다. 그래서 불행하게도 저는 그것들을 더 크게 만드는 것을 포함하지 않는 해결책이 필요합니다. – mrtsherman

1em은 주어진 글꼴에서 소문자 M의 너비를 나타내므로 이해합니다. 1em은 완전한 문자가 표시 될만큼 충분한 높이를 반드시 생성하지는 않습니다. 브라우저 (특히 Firefox와 Safari) 간의 글꼴 렌더링의 차이로 인해 이러한 선을 따라 미묘한 차이가있을 수 있습니다. 높이를 제거 (자동 계산)하거나 크기를 늘리십시오. 좋고 간단합니다.

출처

2011-03-21 16:50:04

제 문제는 클라이언트가 텍스트 상자가 너무 많은 공간을 차지하지 않기를 바라는 것입니다. 입력 높이를 높이면 모양이 마음에 들지 않습니다. 입력 높이와 일치하는 텍스트 높이가 필요합니다. – mrtsherman

"높이"를 완전히 꺼내면 너무 큽니다. 다른 방법으로 생각해보십시오. "높이"가 없다면 텍스트의 크기를 조절할 수 있으며, 입력 값이 높이에 맞게 변경됩니다. –

디지털 방식으로 말해서 실제로 글꼴의 높이이며 글꼴 자체로 설정되므로 실제 픽셀 값은 사용중인 글꼴에 따라 결정됩니다. – Sam

입력 크기를 조정하지 않고 글꼴 크기를 변경할 수 있습니다. em을 통해 크기를 설정하면 상자는 항상 font-size를 기반으로하며 상속됩니다.

1em은 일반적으로 사용자 브라우저 기본 설정이 기본값이거나 시트에서 이전에 설정 한 글꼴 크기 설정을 기반으로합니다 (항상 그렇지는 않음). 귀하의 고객은 소원 및 오름차순을 허용하기 위해 3-4px 정도의 입력에 대한 글자 크기를 작게 만듭니다.

input { 
    height: 16px; 
    width: 100px; 
    font-size: 13px; 
}

출처

2011-03-21 17:18:55 clairesuzy

+1, 네 이것도 작동합니다. – mrtsherman

Firefox 텍스트 입력은 글자의 밑줄을 자릅니다.

답변

관련 문제