Html : em 태그 문자 오버플로 버그

Question

html의 문자 오버 플로우 문제에 대한 해결 방법이 있습니까? 배경색이 있고 간단한 텍스트에 기울임 꼴 (em) 태그가 사용 된 경우에만 표시됩니다. 은 "I"문자

볼 때 그림에서 배경. "i"는 배경에 적합하지 않고 일부가 오른쪽으로 넘쳤습니다.

코드 :이 기능이 아니라 버그

aaaaa<em style="color:#ff0000;background-color:#c3ddfc;">hijyen bariyeri</em>, aaaaaaa 

Answer 1

. 요소의 상자 (배경색을 설정할 때 색이 칠하는 것)는 기울임 꼴 문자가 기울어 져 있지 않은 방식으로 결정됩니다. @MarcB가 주석에서 제안하는 것처럼 오른쪽 패딩을 설정하면이 문제를 처리 할 수 ​​있지만 복잡합니다. 첫째, 필요한 패딩의 양은 폰트 크기에만 의존하지 않고 (이 의존성은 em 단위를 사용하여 처리 할 수 ​​있음) 특정 폰트 페이스에도 적용됩니다. 기울기 각도는 글꼴 디자인에 따라 많이 달라 지므로 "f"를 기울이는 등 문자의 모양도 "e"를 기울이는 것보다 훨씬 더 큰 효과가 있습니다. 둘째, 예에서와 같이 문장 뒤에 문자 뒤에 공백을 추가하면 단어와 표식이 인쇄 상 불쾌한 방식으로 구분됩니다.

나는 구획 기호를 요소 안에 포함하도록 제안합니다. 이는 비논리적으로 보일 수 있지만 (쉼표는 강조된 표현의 일부가 아 니지 만) 활자체로 적합합니다. 종종이 문제를 해결하기에 충분합니다. 예 :

Özetle <em style= 
"color:#ff0000; background-color:#c3ddfc;" 
>hijyen bariyeri,</em> hiye 

이탤릭체 단어가 문장 부호하지만 일반 워드 뒤에 공백이되지 않는 경우에 대한 0.2em 오른쪽 패딩을 설정하는 것이 좋습니다,하지만 몇 가지 테스트 후 특정 값을 결정합니다. 예 :

Özetle <em style= 
"color:#ff0000; background-color:#c3ddfc; padding-right: 0.2em" 
>hijyen bariyeri</em> hiye 

일반적으로 0.2em 값은 Arial과 같은 글꼴에 적합합니다. 이탤릭체 글꼴이없는 글꼴의 경우 브라우저에 "가짜 기울임 꼴"을 사용하도록 강요하는 경우 0.3em과 같은 값을 사용해야합니다. 예를 들어 적용 할 수있는 합성 기울임은 큰 기울기 각도를 사용하여 진정한 이탤릭체. 세리프 글꼴의 경우, Cambria 또는 Times New Roman을 말하면 대부분의 문자에 대해 0.1em으로 충분할 수 있습니다.