줄바꿈과 띄어쓰기가 익스와 사파리에서 깨지는 현상

줄바꿈과 띄어쓰기가 익스와 사파리에서 깨지는 현상

QA

줄바꿈과 띄어쓰기가 익스와 사파리에서 깨지는 현상

본문

익스10이구요, <br /> 태그가 깍두기/네모로 깨져보입니다. 11에서도 깨지는 것 확인했습니다.

 

b2975fc60973c28da513e51484c3ff83_1494207281_4196.jpg
 

 

 

 

 

 

사파리이구요, 띄어쓰기가 네모/깍두기로 깨져보입니다.

 

b2975fc60973c28da513e51484c3ff83_1494207281_5596.jpg
 

어떻게 해결해야 할까요?

이 질문에 댓글 쓰기 :

답변 3

html 4.01의 경우 <br> 표준입니다. 

xhtml 1.0의 경우 <br /> 표준입니다.

 

1. <br /> <-- 띄어쓰기랑 슬러쉬 빼보시고요.

 

2. 그누보드 사용이 아니라면 인코딩 문제라 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 헤드에 넣어보시고요.

 

 

 

 

 

 

 

나눔스퀘어 폰트 적용한 것이 문제라는 답변을 받아서
body{font-family:'Nanum Gothic', '나눔고딕', sans-serif;} 폰트 패밀리 제일 앞에 들어가 있던 Nanum Square 폰트를 지워주니 사파리/익스 박스가 다 사라진 상태예요!
eot svg ttf woff로 적용해주었던 게  다른 분은 정상적으로 작동하는 거 보니 아무래도 제쪽 css 적용 문제인 거 같아요

css문제면 주로 eot svg ttf woff 등 아이콘 문자 같은곳에서 깍두기가 나오는데요.
<br> 깍두기는 DB마이그레이션과 같은 인코딩 문제에서는 종종 나옵니다.
css스크립트에서 <br> 깍두기는 처음보네요.

@font-face {
  font-family: 'Nanum Square';
  src: url('/font/NanumSquareOTFB.eot'); /* IE9 Compat Modes */
  src: url('/font/NanumSquareOTFB.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('/font/NanumSquareOTFB.woff') format('woff'), /* Modern Browsers */
      url('/font/NanumSquareOTFB.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('/font/NanumSquareOTFB.svg#a41a1fda1fdf3dafd3394867a156b1cf') format('svg'); /* Legacy iOS */
}
body{font-family:'Nanum Gothic', '나눔고딕', sans-serif;}

혹시 <br> 태그를 </br> 로 적으신게 아닌가요?

/xxx 는 흔히 유니코드 표현할때 사용되기에 사파리에서 해당 유니코드를 기본설정된 폰트내에서 찾고 못찾았기에 저런식으로 표현한것 같네요. 

다른 분의 답변으로 익스에서는 <br>뒤에</br>가 붙어서 <br></br>로 보인다는 말을 듣기는 했는데 왜 붙는지 잘 모르겠네요 전부 br로 바꿔주었어요. /xxx라는 게 엑박모양 네모 얘기시면, 그 엑박네모는 익스에서 보이는 거예요! 아래가 사파리 사진이구요ㅠㅠ..

나눔스퀘어 폰트 적용한 것이 문제라는 답변을 받아서
@font-face {
  font-family: 'Nanum Square';
  src: url('/font/NanumSquareOTFB.eot'); /* IE9 Compat Modes */
  src: url('/font/NanumSquareOTFB.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('/font/NanumSquareOTFB.woff') format('woff'), /* Modern Browsers */
      url('/font/NanumSquareOTFB.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('/font/NanumSquareOTFB.svg#a41a1fda1fdf3dafd3394867a156b1cf') format('svg'); /* Legacy iOS */
}
body{font-family:'Nanum Gothic', '나눔고딕', sans-serif;} 폰트 패밀리 제일 앞에 들어가 있던 Nanum Square 폰트를 지워주니 사파리/익스 박스가 다 사라진 상태예요!
eot svg ttf woff로 적용해주었던 게  다른 분은 정상적으로 작동하는 거 보니 아무래도 제쪽 css 적용 문제인 거 같아요

br { font-family:dotum;}

 

한 30분 찾아해메다가 폰트 때문이래서 이렇게 적용해보니 해결되네요 ㅋㅋ

답변을 작성하시기 전에 로그인 해주세요.
전체 56
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT