[펌] 한글 우측 의문의 공백 해결하기

iOS, 안드로이드 OS 등 모바일 단말기의 브라우저에서 한글 렌더링시 하나의 공통점이 있습니다.

한글 텍스트 우측에 의문의 공백이 발생한다는 것입니다.

텍스트에 background-color를 지정해보면,
텍스트 노드 자체에 공백이 포함되어 있음을 확인할 수 있습니다.
특이하게도 이 공백은 글자수가 늘어날 때마다 2px씩 증가합니다.

따라서 한글 우측에 다른 인라인 요소가 올 경우 간격이 이상해보이거나,
가운데 정렬시 왼쪽으로 치우쳐보이는 문제를 가지게 됩니다.
(디자이너로서 용납이 안될때가 있죠~!)
body의 font-size가 14px이거나 17px 이상일 경우 위 현상이 발생하는데요,
자, 어떻게 하면 해결할 수 있을까요?

해결방법 : 텍스트의 부모 엘리먼트 안쪽 양측에 공백 삽입
- 변경전 : <a href="#">신동<span>[53]</span></a>
- 변경후 : <a href="#"> 신동<span>[53]</span> </a>

출처

http://www.webpeace.net/content.jsp?num=83&posttype=61&userid=sunnykist&type=user