줄바꿈과 띄어쓰기가 익스와 사파리에서 깨지는 현상
본문
익스10이구요, <br /> 태그가 깍두기/네모로 깨져보입니다. 11에서도 깨지는 것 확인했습니다.
사파리이구요, 띄어쓰기가 네모/깍두기로 깨져보입니다.
어떻게 해결해야 할까요?
답변 3
html 4.01의 경우 <br> 표준입니다.
xhtml 1.0의 경우 <br /> 표준입니다.
1. <br /> <-- 띄어쓰기랑 슬러쉬 빼보시고요.
2. 그누보드 사용이 아니라면 인코딩 문제라 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 헤드에 넣어보시고요.
head.sub.php 에 메타 태그 삽입하고 <br>로 전부 바꿔주었는데도 마찬가지이네요ㅠㅠ 캐쉬 삭제도 해보았구요. 뭐가 문제인지 파악이 안 돼요ㅠㅠ
그누보드 사용이면 메타태그는 필요없고요.
크롬은 괜찮은데 익스와 사파리만 문제인건가요??
네 현재 익스10,11/크롬/사파리 이렇게 세개 브라우저 확인한 상태입니다
나눔스퀘어 폰트 적용한 것이 문제라는 답변을 받아서
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;}
아 제가 확장자를 말씀 안 드린 줄 알고 급하게 덧붙였는데 써놨었네요ㅎㅎ..
그럼 db마이그레이션.. 문제는 아닌 건가요ㅠㅠ?
혹시 <br> 태그를 </br> 로 적으신게 아닌가요?
/xxx 는 흔히 유니코드 표현할때 사용되기에 사파리에서 해당 유니코드를 기본설정된 폰트내에서 찾고 못찾았기에 저런식으로 표현한것 같네요.
다른 분의 답변으로 익스에서는 <br>뒤에</br>가 붙어서 <br></br>로 보인다는 말을 듣기는 했는데 왜 붙는지 잘 모르겠네요 전부 br로 바꿔주었어요. /xxx라는 게 엑박모양 네모 얘기시면, 그 엑박네모는 익스에서 보이는 거예요! 아래가 사파리 사진이구요ㅠㅠ..
올리신 사진은 아래가 네모로 보이네요. 그건 중요한게 아니지만...
일단은 직접 살펴볼수 있는 주소가 필요하겠네요.
문서 타입(doctype) 설정도 살펴보셔야 겠고요.
나눔스퀘어 폰트 적용한 것이 문제라는 답변을 받아서
@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분 찾아해메다가 폰트 때문이래서 이렇게 적용해보니 해결되네요 ㅋㅋ
죄송합니다~만,
어느 폴더의, 어떤 파일에 해당 내용을 적용하면 되는지요?!!
도저히 찾을 수 없어서 어쩔 수 없이 질문을 드립니다!!!
