Html Chrome在鼠标上方渲染垂直线

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

这是我的代码中的一个问题，还是我们遇到了Webkit和/或Chrome的问题

更新1

最初我认为这是RGBA背景的问题，所以我尝试使用

背景：黑色以查看它是否更改了任何内容。这不起作用，因为鼠标上方仍有线路

更新2

我认为这是一个问题，因为我一直在使用显示器。我正在使用带有视网膜显示器的新款Macbook Pro。这可能仍然是问题的根源，但我不相信这是真的。我还没有在另一台不是视网膜显示器的设备上测试自己，但有人告诉我，这些线路仍然很普遍

此图像将有所帮助：

我无法在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%;
 }

另外，我不确定为什么显示为
表
，但这可能会加剧问题。将其更改为
block
对于这种技术，您的盒子模型有些地方我不喜欢。我曾使用过类似的悬停/淡入脚本，但从未使用过负边距（因为它将顶起长方体模型），或使顶层大于底层

我发现了一些有助于我更好地渲染的东西（我没有看到线条，但我看到的不是白色圆角的尖峰，就是父角的黑色凿点）。无论如何，这里有几件事：

取消-1%0-1%的边距（使宽度达到102%，然后使用-1%的边距对我来说似乎是100%，但依赖于所有浏览器呈现相同的数学）
将父级和子级设置为相同的宽x高（200px 410px）
将子对象的半径减小1 px，为我隐藏了角的奇怪之处（同样，我认为这是渲染引擎的东西FWIW）；虽然没有设置，但应该可以完成这项工作
我还将
.projectItem a:hover
添加到
.projectItem a
的CSS声明中，以便只允许在
上发生转换

此提琴在分别添加/删除上述所有功能的情况下实现翻滚效果：

HTH.
我实际上没有放大，我使用的是视网膜显示器。我还可以确认，将样式更改为
block
并不能解决问题，但这是正确的显示器，我已对其进行了相应的更改。此外，我发现将宽度和高度从100%更改为它们各自的值也不能解决问题。我可以更早地复制它-仅在链接第一次悬停时的几分之一秒-但现在我不能。OP，如果你改变了什么，也许这就是你的解决方案？我唯一的解决办法就是超出父容器的尺寸，尝试更新的答案。我尝试了你更新的Duopixel示例，但没有成功：我开始认为这可能是一个问题，因为Chrome与我的视网膜显示器不兼容。哇，Dawson。。。完美答案。完全修复了一切！非常感谢您的帮助和帮助！