3

大家好，我content: "▼"在 CSS3: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 不支持..？有什么解决办法吗？

4

3 回答 3

2

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

于 2013-09-19T14:16:42.667 回答
0

眼前的问题

从在 CSS 中声明字符编码：

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

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

然后使用 UTF-8

@charset "UTF-8";

大局 - 不同的方法

回到问题的根源，如果您需要（如果不是，请为 OT 道歉......但它可能同样有用）是在 HTML 元素的末尾放置一个箭头，例如自定义选择框, 或Menù Item , 那么问题很简单, 不需要涉及深奥的字符:

  1. 仅使用 CSS 创建所需的形状；

  2. 要将这些形状应用于伪元素，请将内容设置为空 ( content: '';)，并调整absolute: position相对于父元素的位置；Running Demo;

  3. 为了防止Firefox 出现“奇怪的暗边框”问题，请始终使用RGBA(CSS3 RGB with Alpha-channel, 设置为 0，因此是透明的) 而不是transparent，如答案中所述；

  4. 忘记在您的页面中使用某种Wingdings 字体作为图形：)

于 2013-09-19T13:19:10.683 回答
0

尝试 ：

#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 （将▼符号粘贴到此处粘贴字符）

于 2013-09-19T13:04:11.240 回答