2012-10-16 2 views
2

해당 버튼을 선택하면 드롭 다운이 표시됨을 나타 내기 위해 버튼에 삼각형 아래에 유니 코드를 사용하는 웹 페이지가 있습니다.유니 코드 문자 (아래쪽 삼각형)가 이상한 텍스트로 표시됩니다.

내가 thusly 히 CSS에서 삼각형을 추가 해요 :

.icon:after { 
     content:"▼"; 
    } 
    .icon { 
     width:12px; 
     height:12px; 
     margin: 3px; 
     display: inline-block; 
     cursor:default; 
    } 

를 페이지의 메타 태그는 다음과 같습니다

<meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; chrome=1" > 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

그러나, 삼각형은 삼각형으로 표시되지 않습니다, 그들은 보여 다음과 같이하십시오 : strange text instead of unicode character

왜 이런 식으로 나타날지, 어떻게 고쳐야하는지 생각하세요?

+0

이것은 분명히 파일 인코딩 문제입니다. 'content : "\ 25bc";를 사용하여 피할 수 있습니다.; –

+0

@ RaymondChen은 모든 브라우저에서 지원됩니까? –

+0

연구하러 가겠습니다. 당신도 그 일의 일부를해야합니다. –

답변

6

모든 종류의 유니 코드 문자를 사용하여 모든 종류의 문자를 모양 지정할 수 있습니다.

.icon:after { 
    content:"\25bc"; 
} 

또는 작은 삼각형 :

.icon:after { 
    content:"\25be"; 
} 

완전히 크로스 브라우저 호환이 트릭 예를 들어, 귀하의 경우에는 당신은 같은 것을 사용합니다.

+0

내 캐릭터가 왜 그냥 나타나지 않는지 알기 원하십니까? –

+2

이유는 CSS를 ASCII 문자 만 사용하여 작성해야하기 때문입니다. 비 ASCII도 사용하려면 여기를 참고하십시오. http://stackoverflow.com/questions/2526033/why-specify-charset-utf-8-in-your-css-file –

2

CSS 규칙이 나타나는 문서 (HTML 또는 CSS 문서)는 UTF-8 이외의 인코딩 (예 : ISO-8859-1 또는 Windows-1252)을 지정하는 HTTP 헤더와 함께 보내지며, CSS 문서는 브라우저를 추측하도록 인코딩을 전혀 지정하지 마십시오.

해결 방법은 HTTP 헤더를 변경하여이 문제를 해결하는 것입니다. W3C 페이지 Character encodings을 참조하십시오.

HTTP 헤더가 인코딩을 지정하지 않으면 다음에 charset 선언이 적용될 수 있습니다.

문자 이스케이프를 사용하면 증상을 제거하는 데 도움이 될 수 있지만 나중에 문제가 발생하지 않게하려면 (누군가 이상한 문자를 문서에 추가하는 경우) 인코딩 문제가 해결되도록하는 것이 가장 좋습니다.