Question

我在html中有一个按钮，我有它，这样一旦用户将鼠标悬停在按钮上，按钮的文本将移动到一侧，箭头将出现在另一侧。但是出于某种原因，当我将鼠标悬停在它上面时，会出现带有小帽子的有趣“A”。这种情况发生在我尝试的所有浏览器中。任何想法如何解决它？

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>

Answer 1

此问题很可能是由样式表中使用的字符编码与呈现网页时使用的字符编码之间存在一些差异造成的。

»字符在Unicode中称为代码点U+00BB。该字符可以以几种不同的方式编码，例如当存储在文件中时。最值得注意的是，它使用octets中的以下两个UTF-8进行编码：

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

如果您的网页使用不正确的字符编码进行渲染，例如微软cp-1252，则相同的八位字节将被解释为两个单个八位字节字符：

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

许多类似的8位字符编码中[a0-bf]范围内的大多数字符都直接映射到相应的Unicode代码点。巧合的是，当其中一个字符以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>元素（在<head>部分中），如下所示：
```
<meta http-equiv="content-type" content="cp-1252">
```
或：
```
<meta charset="cp-1252">
```
如果存在上述两种情况，浏览器应遵循HTTP标头，并且只有在HTTP标头中缺少字符编码时才应考虑<meta>元素。
< / LI>
如果未通过任何上述方法声明字符编码，浏览器将回退到默认设置或用户配置。

究竟如何设置正确的HTTP标头取决于您正在使用的Web服务器。

还有其他可能的原因，例如双重编码的UTF-8，需要考虑。您可能不得不在十六进制查看器中下载呈现的网页，并检查它以及源文件，以确切了解出现了什么问题。

Answer 2

你也应该在css中声明charset。

MDN

奇怪的是当我在html中设置按钮动画时出现

2 个答案: