Question

大家好我在CSS3 content: "▼"伪元素中添加了:after，但它在IE9中并没有明显的效果。

它显示"Γû╝"就像这个符号。我正确添加了<meta>标记。

我的css

#get-in {
  position: relative;
  margin-top: 15px;
  margin-right: 0px;
  background-color: #bfbfbf;
  border-radius: 4px;
  border: 1px solid #b7b7b7;
  width: 74px;
  line-height: 26px;
  height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-indent: 15px;
  /*text-align: center;*/
}
#get-in:after {
  content: "▼";
  font-size: 12px;
  padding: 0 6px;
  position: absolute;
  right: 0;
  top: 0;
}

我的代码有什么问题或者IE9不支持..？有没有修复？

Answer 1

尚未正确声明CSS文件的字符编码。首先，确保它实际上是在HTTP标头中声明为UTF-8编码的UTF-8编码和。您还可以将@charset "utf-8"放在CSS文件的开头。

Answer 2

尝试：

#get-in:after {
  content:'\25BC';
  font-size: 12px;
  padding: 0 6px;
  position: absolute;
  right: 0;
  top: 0;
}

SRC：http://www.evotech.net/articles/testjsentities.html （将▼符号粘贴到在此处粘贴字符）

Answer 3

即时问题

来自Declaring character encodings in CSS：

如果CSS文件中有任何非ASCII文本，最好始终声明外部CSS样式表的编码。

@charset "<IANA-defined-charset-name>";

然后使用UTF-8

@charset "UTF-8";

大图 - 一种不同的方法

回到问题的根源，如果你需要什么（如果不是，对不起OT ......但它可能有用）就是放置一个箭头在HTML元素的末尾，如自定义选择框或Menù项目，那么问题很简单，并且不需要esotic字符涉及：

Create the desired shape with CSS only;
要将这些形状应用于伪元素，请将内容设置为空（content: '';），并使用absolute: position相对于父元素调整展示位置; Running Demo
要阻止Firefox上的"Weird dark border" problem，请始终使用RGBA（带有Alpha通道的CSS3 RGB，设置为0，因此是透明的）而不是transparent，如上所述{ {3}};
忘记在页面中使用某种 Wingdings字体作为图片：）

伪元素：在IE9中不工作，内容为：“Γû╝”

3 个答案: