css - FF 在 :after element (CSS) 上应用随机字体大小

Question

我有这个基本上是 <span> 的圆形加号上课 plus .在 CSS 中，我渲染了一个包含 + 的 :after 元素。字符 ( \ff0b )。奇怪的是，Firefox 呈现了 + 的字体大小。与普通的 Plus 非常不同。 Chrome 做得对。

在这张截图中，左边是 Chrome，右边是 Firefox。为了比较，我在“alle”之前添加了一个普通的加号字符。忽略灰色渐变，那只是浏览器窗口的阴影:

这是 CSS:

 .plus {
    display: inline-block;
    margin-right: 0.2em;
    margin-top: -2px;
    vertical-align: middle;
    color: white;
    background: rgba(0, 161, 228, 0.8);
    width: 1.1em;
    height: 1.1em;
    border-radius: 1.1em;
    text-align: center;
    line-height: 1.1em;
 }
 .plus:after {
    content: "\ff0b";
 }

HTML 再简单不过了:

<span class="plus"></span>+ alle Kategorien

Answer 1

似乎如果您将\ff0b 替换为实际的“+”，则两种浏览器中的呈现是相同的:

 .plus:after {
   font-family: Arial;
   font-size: 11px;
   content: "+";
}

http://jsfiddle.net/r47JB/3/

我还设置了字体大小和字体粗细，以确保它不会继承。