이상한 A는 html로 버튼을 움직일 때 나타납니다

나는 html로 된 버튼을 가지고 있습니다. 사용자가 버튼을 가리키면 버튼의 텍스트가 한쪽으로 이동하고 다른 화살표가 나타납니다 측면. 그러나 내가 그 위에 마우스를 가져 가면 어떤 이유 때문에 작은 모자가 달린 재미있는 "A"가 나타납니다. 이것은 내가 시도한 모든 브라우저에서 발생합니다. 어떤 아이디어로 그것을 고치는 법?이상한 A는 html로 버튼을 움직일 때 나타납니다

html로는 다음과 같습니다

.button { 
 
    background-color: #4CAF50; 
 
    /* Green */ 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    border-radius: 8px; 
 
    width: 250px; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
    margin-top: 50px; 
 
} 
 
.button span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 
.button span:after { 
 
    content: '»'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.5s; 
 
} 
 
.button:hover span { 
 
    padding-right: 25px; 
 
} 
 
.button:hover span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
}

<button class="button" style="vertical-align:middle"><span>Contact us today</span> 
 
</button>

출처

2016-10-02 Peter Gaffney

질문에 스크린 샷을 첨부 할 수 있습니까? – Samundra

방금 사진을 추가했습니다. –

답변에서 언급했듯이, 그것은 내 끝에서 잘 작동합니다. 모든 가능성을 배제하기 위해»를 작은 따옴표 대신 큰 따옴표로 묶어보십시오. – hulkinBrain

이 문제는 대부분 스타일 시트에 사용되는 문자 인코딩 사이에 약간의 차이가 발생하고 웹 페이지를 렌더링 할 때 문자 인코딩이 사용됩니다.

» 문자는 유니 코드의 코드 포인트 U+00BB으로 알려져 있습니다. 이 문자는 몇 가지 다른 방법으로 인코딩 할 수 있습니다 (예 : 파일에 저장 될 때). 특히, 그것을 사용하여 인코딩 된 두 octets UTF-8에서 다음 웹 페이지가 잘못된 문자 인코딩을 사용하여 렌더링되는 경우

는

 Encoding Character 
    -------- --------- 
    [c2][bb] »

같은 마이크로 소프트의 cp-1252로 예를 들어, 같은 옥텟 두 가지로 해석됩니다 단일 옥텟 문자 :

 Encoding Character 
    -------- --------- 
    [c2]  Â 
    [bb]  »

[a0-bf] 범위에서 문자의 대부분을

, 많은 유사한 8 비트 문자 인코딩에 직접 대응하는 유니 코드 코드 포인트에 매핑됩니다. 유감스럽게도이 문자 중 하나가 UTF-8로 인코딩되면 결과 옥텟 시퀀스는 동일하지만 접두사가 [c2]으로 추가되어 임의의 문자가 웹 페이지에 추가 된 것처럼 보입니다.

내 생각에 CSS 파일은 UTF-8로 저장되지만 웹 페이지는 다른 문자 인코딩을 사용하여 렌더링됩니다.

가해야 할 일 :

는 HTTP 헤더을 확인

이처럼 Content-Type 헤더에 적절한 문자 인코딩을 선언해야합니다 귀하의 서버 : 만약
```
Content-Type: text/plain; charset=utf-8 
```
을 charset 매개 변수가 잘못되었거나 누락되었으므로 수정해야합니다.

서버에서 보낸 실제 HTTP 헤더를 표시 할 수있는 몇 가지 온라인 서비스가 있습니다. W3C Markup Validator을 사용하여 웹 페이지의 유효성을 검사하면 (실제로 어쨌든) 문자 인코딩이 실제로 사용되고 있는지 알려줍니다.
은 <meta> 요소

웹 서버 가는 HTTP 헤더에 문자 인코딩을 선언하지 않은 경우 브라우저가 HTML 소스의 문자 인코딩을 찾습니다을 확인합니다.
```
<meta http-equiv="content-type" content="cp-1252"> 
```
나 : 위의 모두가있는 경우
가
```
<meta charset="cp-1252"> 
```
, 브라우저가 HTTP 헤더에 순종하고 경우에만해야이 같은합니다 (<head> 섹션)을 <meta> 요소를 찾습니다 <meta> 요소를 고려하면 HTTP 헤더에서 문자 인코딩이 누락됩니다.
위의 방법 중 을 통해 문자 인코딩을 선언하지 않으면 브라우저가 기본 설정이나 사용자 구성으로 돌아갑니다.

정확한 HTTP 헤더를 설정하는 방법은 사용중인 웹 서버에 따라 다릅니다.

이중 인코딩 UTF-8과 같은 다른 원인도 고려해야합니다. 웹 페이지를 다운로드 한 다음 16 진 뷰어에서 원본 파일을 확인하여 잘못된 점을 정확히 찾아야 할 수도 있습니다.

출처

2016-10-02 19:57:59

당신은 너무 당신의 CSS의 캐릭터 세트를 선언해야합니다.

MDN

출처

2016-10-02 16:33:57 VilleKoo

이상한 A는 html로 버튼을 움직일 때 나타납니다

답변

관련 문제