Chrome在鼠标悬停时呈现垂直线

Question

Example website

因此，当您将鼠标悬停在项目上时，您应该看到rgba背景淡入，并在现有图像上显示一些文本。我无法在Safari或Firefox中复制错误。事实上，我不能每次都为同一个复制这个，我也可以说刷新页面也不一定能解决这个问题。

这是我的代码中的问题还是我们特意遇到了Webkit和/或Chrome的问题？

更新1

最初我认为这是RGBA背景的问题所以我尝试使用background: black;来查看它是否有任何改变。由于该线路在鼠标悬停时仍然存在，因此无法正常工作。

更新2

由于我一直在使用的显示器，我认为这是一个问题。我在带有视网膜显示屏的新款Macbook Pro上。这可能仍然是问题的根源，但我不相信它是。我还没有在另一台不是视网膜显示器的设备上做自己的测试，但是我被告知线路仍然普遍存在。

此图片有助于：

Answer 1

我无法在Chrome中重现 le问题，但是从您的屏幕截图中看起来您已经放大了。有时浏览器会缩小百分比并且您可能最终会丢失一个像素，这是最好的使粘贴到每个边缘而不是指定高度和宽度：

.projectItem {
  overflow: hidden;
 }

 .projectItem a {
   display: block;
   position: absolute;
   opacity: 0;
   width: 102%;
   height: 102%;
   background: black;
   color: #F6F8EE;
   background: rgba(0, 0, 0, 0.85);
   border-radius: 5px;
   margin: -1% 0 0 -1%;
 }

另外，我不确定你为什么显示为table，但这可能会使问题复杂化。将其更改为block。

Answer 2

你的盒子模型有些东西我不喜欢这种技术。我使用了类似的悬停/淡入淡出脚本，但从未使用过负边距（因为它会抬高盒子模型），或者使顶层大于底部。

我发现了一些有助于它为我呈现更好的东西（我没有看到线条，但是我看到圆角的白色圆角突出或者在父角上有黑色凿子点）。无论如何，这里有几件事：

1. Nix -1％0 0 -1％的边距（制作102％的宽度，然后使用-1％的边距对我来说似乎100％，但依赖所有浏览器渲染数学相同）。
2. 将父级和子级设置为相同的W x H（200px x 410px）
3. 将孩子的半径减少一个px为我隐藏了奇怪的角落（再次，我认为这是渲染引擎的事情FWIW）;虽然没有设置它应该做的工作。
4. 我还在.projectItem a:hover的CSS声明中添加了.projectItem a，以便只允许在.projectItem a:hover上进行转换。

这个小提琴分别在上面添加/删除了以上所有功能的翻转效果：http://jsfiddle.net/hd4QM/

HTH。