3

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

是什么导致短语中的最后一个字母“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，可以在代码和问题上达到顶峰。

我在这里已经有了解决这个问题的方法。

我使用:beforeand:after在li两侧创建一个空白区域，以不切入背景。

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

4

1 回答 1

1

这似乎几乎可以肯定是一个显示错误。基于以下也解决了该问题的解决方案，我怀疑在动画返回期间出现的文本中存在轻微重叠，导致1px重影发生。当我在 Chrome 中使用检查器工具选择 并以蓝色突出显示选择时，我相信我什至可以看到.liulli1pxk

我不确定我能否给出比这更好的解释——这似乎是li文本字体大小的错误。

然而，以下所有可能比伪元素更优雅地解决您的问题：

#1 添加padding-right: 1px

这适用于.text( ul) 元素（示例）或li元素（示例）。

#2 添加overflow: hidden

这是.text( ul) 元素（示例）。

#3 添加透明的右边框

border-right: 1px solid transparent用 a来margin-right: -1px抵消效果（如果需要）也可以在ul( example ) 或li( example ) 上解决它。

#4 添加一个margin-right: 1px

这仅适用于li（示例）。

结论

基本上，使用您最初的伪元素解决方案和上述方法，似乎任何为该右边缘提供缓冲区的东西都可以防止错误发生。

于 2013-11-15T02:18:52.290 回答