在Firefox中渲染错误？文本元素

Question

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

问题是当幻灯片互相改变时，水平线出现在它们上面：

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

箭头在跨度中很简单> <，并且它们具有文本阴影。如果我从中移除文字阴影，则线条会变薄：

带箭头的跨度绝对位于div内部，每个带有一半的滑动容器。这些div位于其他div中，它是幻灯片的兄弟，并且z-index:1位于它们之上。如果我为跨度设置了右/左位置，那么它们只是一个小的叠加图像，或者如果我为了相同的目的使div更薄（例如，40％而不是50％），则该行消失： < / p>

看起来它与跨度的宽度有关，但设置max-width和display：block也没有帮助。

我怎样才能摆脱这种奇怪的路线？也许有CSS黑客呢？您可以自己检查滑块here。谢谢！

Answer 1

所以我已经删除了跨度，而是将箭放在div中。我使用以下方法将它们垂直居中：在来自this answer的CSS攻击之前。虽然我不得不在箭头之前和之后添加一些内容，但它们不会只是在幻灯片容器的边缘上。好吧，有点脏，但现在好了。甚至可以在IE10中使用，我也不需要更多。