html - CSS，不透明度使一些字体隐藏

Question

这很难解释，所以看一下代码:

HTML:

   <link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  <h1>Header<span>andAnother</span></h1>

CSS:

h1 {
  font-family: tahoma;
  position: absolute;
}

h1 span {
  opacity: 0.9;
  font-family: 'Rock Salt', cursive;
  font-style: italic;
  position: relative;
  top: 30px;
  left: -100px;
}

这是一个fiddle , 现在是什么问题？

如果您查看 andAnother 中的单词 and，您会发现 a 的一部分丢失了，这是它发生的原因是因为 opacity 规则，如果我删除 opacity a 将按原样显示，现在我几乎可以肯定问题是因为不透明度 低于1 creates new stacking context但我无法证明这一点，我什至不确定我是对的，如果有人能解释原因和方式，我将非常感激。

Answer 1

您可以使用 rbga 代替不透明度。即 color: rgba(0, 0, 0, 0.9);

http://jsfiddle.net/zp6w4dzc/3/

可能与这个 ClearType 字体错误有关... https://bugzilla.mozilla.org/show_bug.cgi?id=494320

编辑添加CSS opacity vs rgba: which one is better?