文本切割背景中的像素线

Question

我又回来了另一个非常奇怪的问题。

是什么导致短语中的最后一个字母“k”从其父背景中剪切出虚线像素？我有一个解决方案，可能不是最优雅的，并且对其他人开放，但我真的很感兴趣为什么会这样。

我正在制作一个滚动条，现在我只是通过文本滑动来测试我的动画。我用字母对它进行了测试，没有尖锐的边缘，没有问题，但是“T和k”（可能是其他字母）会切入背景。

“T”在顶部产生相同的效果，但线条与背景非常接近。

它在Firefox和IE中工作正常我不确定，因为我在家里使用Mac。在Chrome和Safari中，会出现此问题。

以下是它的外观图像，

当您再次切换按钮以使文本向后滑动时，它会切入背景并将此1px保留为点状或直线的高度切割。

您也可以再次单击该按钮，直到它停止，然后再单击一次以切出实线。

以下是文本所包含的相关css，

.text {
   right: 50%;
   text-align: left;
   font-size: 1.5em;
   font-family: "century gothic";
   position: absolute;
   color: #f7f7f7;
   transition: right 3s ease-in;
   -webkit-transition: right 3s ease-in;
   -moz-transition: right 3s ease-in;
}

.text.active {
   right: 2%;
}

.text > li {
   display: inline-block;
}

这是一个JSFIDDLE ，可以在代码和问题上占据一席之地。

我已经找到了解决此问题的方法here。

我在:before上使用:after和li在两边创建了一个空白区域，但没有切入背景。

我感谢任何和所有的投入！

Answer 1

几乎可以肯定是显示错误。基于以下解决该问题的解决方案，我怀疑1px内的文本与显示的li略有ul重叠在动画回放过程中导致重影发生。当我在Chrome中使用检查器工具选择li并用蓝色突出显示选项时，我相信我甚至可以看到1px的{​​{1}}重叠。

我不确定我能给出一个比这更好的解释 - 似乎是用文本字体调整k的大小。

然而，除了伪元素之外，以下所有问题都可能是更优雅的解决方案：

＃1添加li

这适用于padding-right: 1px（.text）元素（example）或ul元素（example）。

＃2添加li

这是overflow: hidden（.text）元素（example）。

＃3添加透明的右边框

将ul与border-right: 1px solid transparent放在一起以抵消效果（如果需要），无论是margin-right: -1px（example）还是ul，都可以解决问题（example）。

＃4添加li

这仅适用于margin-right: 1px（example）。

<强>结论

基本上，使用原始的伪元素解决方案和上面的内容，似乎任何给右边缘提供缓冲区的东西都可以防止错误发生。