0

示例网站

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

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

更新 1

最初我认为这是 RGBA 背景的问题，所以我尝试使用 abackground: black;来查看它是否改变了任何东西。这不起作用，因为鼠标悬停时该线仍然存在。

更新 2

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

此图像将有助于：

这是一个有趣的图像描述！

4

2 回答 2

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.

于 2012-10-16T22:37:55.290 回答
1

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

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

  1. Nix -1% 0 0 -1% 边距（制作 102% 宽，然后使用 -1% 边距对我来说似乎是 100%，但依赖于所有浏览器呈现相同的数学）。
  2. 将父子设置为相同的W x H（200px x 410px）
  3. 将孩子的半径减小 1 px 为我隐藏了角落的奇怪之处（再次，我认为这是渲染引擎的东西 FWIW）；虽然没有设置它应该可以完成这项工作。
  4. 我还添加.projectItem a:hover到.projectItem a的 CSS 声明中，以允许仅在.projectItem a:hover.

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

HTH。

于 2012-10-23T16:05:39.523 回答