在 Firefox 中呈现错误？文本元素下方的不透明度过渡
Rendering bug in Firefox? Opacity transition below the text element
我正在为我的网站开发一个简单的不透明度滑块，我遇到了一个奇怪的渲染错误 (?)，它只发生在 Firefox 中（Chrome 和 Opera 完美地处理了它）。
问题是当幻灯片相互切换时，它们上面出现了一条水平线：
很明显跟切换图片的箭头有关。如果我为它们设置 display: none，则不会出现任何行。
箭头的跨度很简单 > <，并且有 text-shadow。如果我从中删除 text-shadow ，线条会变细：
带箭头的跨度绝对位于 divs 内，每个跨度占幻灯片容器的一半。这些 div 位于其他 div 内，它与幻灯片同级并且有 z-index:1 在它们之上。如果我为 span 设置 right/left 位置，这样它们只会叠加一点图像，或者如果我为了同样的目的使 divs 变细（例如，40% 而不是 50%），线条就会消失:
这似乎与跨度的宽度有关，但设置 max-width 和显示：块也无济于事。
我怎样才能去掉这条奇怪的线？也许有 CSS 的破解方法？您可以自己检查滑块 here。谢谢！
所以我删除了跨度，而是将箭头放在 div 中。我使用来自 this answer 的 :before CSS hack 将它们垂直居中。没有奇怪的线条，并且像魅力一样工作，尽管我不得不在箭头之前和之后添加一些 nbsp，这样它们就不会只位于幻灯片容器的边缘。好吧，有点脏，但现在还好。即使在 IE10 中也能正常工作，我不需要更多。
我正在为我的网站开发一个简单的不透明度滑块，我遇到了一个奇怪的渲染错误 (?)，它只发生在 Firefox 中（Chrome 和 Opera 完美地处理了它）。
问题是当幻灯片相互切换时，它们上面出现了一条水平线：
很明显跟切换图片的箭头有关。如果我为它们设置 display: none，则不会出现任何行。
箭头的跨度很简单 > <，并且有 text-shadow。如果我从中删除 text-shadow ，线条会变细：
带箭头的跨度绝对位于 divs 内，每个跨度占幻灯片容器的一半。这些 div 位于其他 div 内，它与幻灯片同级并且有 z-index:1 在它们之上。如果我为 span 设置 right/left 位置，这样它们只会叠加一点图像，或者如果我为了同样的目的使 divs 变细（例如，40% 而不是 50%），线条就会消失:
这似乎与跨度的宽度有关，但设置 max-width 和显示：块也无济于事。
我怎样才能去掉这条奇怪的线？也许有 CSS 的破解方法？您可以自己检查滑块 here。谢谢！
所以我删除了跨度，而是将箭头放在 div 中。我使用来自 this answer 的 :before CSS hack 将它们垂直居中。没有奇怪的线条，并且像魅力一样工作，尽管我不得不在箭头之前和之后添加一些 nbsp，这样它们就不会只位于幻灯片容器的边缘。好吧，有点脏，但现在还好。即使在 IE10 中也能正常工作，我不需要更多。