html - 在 Firefox 中呈现错误？文本元素下方的不透明度过渡

Question

我正在为我的网站开发一个简单的不透明度 slider ，我遇到了一个奇怪的渲染错误(？)，它只发生在 Firefox 中(Chrome 和 Opera 可以完美地处理它)。

问题是当幻灯片相互改变时，它们上面出现了一条水平线:

显然它与切换图像的箭头有关。如果我将 display: none 设置为它们，则不会出现任何行。

箭头是简单的 > < 跨度，并且它们有文本阴影。如果我从中删除文本阴影，线条会变细:

带箭头的跨度绝对位于 div 内部，每个 div 占据幻灯片容器的一半。这些 div 位于其他 div 中，它与幻灯片同级，并且 z-index:1 位于它们之上。如果我为 span 设置右/左位置，这样它们只会叠加一点图像，或者如果我为了同样的目的使 div 更薄(例如，40% 而不是 50%)，该行消失:

这似乎与 span 的宽度有关，但设置 max-width 和 display: block 也无济于事。

我怎样才能摆脱这条奇怪的线？也许它有 CSS hacks？你可以自己检查 slider here .

Answer 1

所以我删除了跨度，而是将箭头放在 div 中。我使用 :before CSS hack from this answer 将它们垂直居中.没有奇怪的线条，并且像魅力一样工作，尽管我不得不在箭头之前和之后添加一些 nbsp，这样它们就不会只位于幻灯片容器的边缘。嗯，有点脏，但现在还好。即使在 IE10 中也能正常工作，我不需要更多。