静态背景图像 "pulsates" 迅速 - 很奇怪
Static background-image "pulsates" rapidly - very strange
这是我见过的最奇怪的事情。
我有一个 class of div 有一个背景图像，定义如下：
background-image: url("circle.png")
background-size: contain
您可以在此处查看 div：Rouvou.com/fiction。它们被称为 .circle-blue 或 .circle-red，并且两个 class 的行为相同。
所以这就是它变得奇怪的地方：在带有 ThinkVision 显示器的 Lenovo ThinkCentre 机器上，使用 Firefox，它们 "pulsate" 迅速，或者宽度和高度向右和向下增长一个像素，然后再次收缩, 非常快, 像闪烁。
由于联想是只安装了两个浏览器的学校计算机，我唯一可以测试的其他浏览器是IE，在其中没有发现这种行为。我希望我可以在这里 post 视频来展示它，但这是其中一个 div 的屏幕截图：
我已经在许多其他类型的机器上的几乎所有浏览器上测试过它，我发现这种行为的唯一地方是 Lenovo ThinkCentre 上的 Firefox，带有 ThinkVision 显示器。我还测试了大约 20 个不同的 ThinkCentres，并且在每个 ThinkCentres 上都显示此错误。
有没有人运行以前遇到过类似的事情？可能是什么原因造成的？谁能至少在 machine/browser 上重现该问题？
如果需要的话，我使用的是 Firefox 31.0。
只是一个想法，不知道它是否有帮助，因为我无法在我的机器上测试它，但是你试过在你的 div 上设置 max-width 和 max-height 吗？在检查它们时，它们只设置了 width 和 height。
尝试将它们设置为相同的宽度和高度：
max-width: 57px;
max-height: 57px;
您也可以尝试设置 min-height 和 min-width:
min-width: 57px;
min-height: 57px;
您能否清除浏览器中加载的所有 CSS
CTRL+SHIFT+DELETE
我也有一种感觉，有不止一个 CSS 个文件指向 div 的 id。您也可以更新您的浏览器。
我无法在没有访问其中一台机器的情况下对其进行测试，但在查看您的页面后，我可以 99% 肯定地说问题实际上是下面规则的 background-size: contain 部分。 Firefox 在那个浏览器版本中才开始支持它，它可能还有点问题。
(http://caniuse.com/#feat=background-img-opts)
另一件让我相信是这种情况的事情是，当不应用该规则时，背景图像会像您描述的那样向右和向下扩展。
由于这些点的大小在调整页面大小时不会改变，解决方法是在 Gimp 或 Photoshop 中手动将图像调整为正确的大小，而不是尝试在飞。这个小的清理也会对页面的整体 loading/rendering 进行小幅改进。
如果您确实需要调整图像大小，您的选择是使用带有 width: 100%; height: auto 的 img 标签并将文本覆盖在顶部，或者制作一个更大的图像，其中只有两个- 色调颜色和水平斜线。我可能只是将其全部设为正方形图像，然后将其添加为 background-image，位置设置为 center/center（如果需要调整大小时，将斜线保持在正确的位置）并设置 border-radius 在 div 到 div 大小的 50%，再次成为一个圆圈。
#category .category-thing .category-thing-right-wrapper-wrapper .category-thing-right-wrapper {
display: inline-block;
position: absolute;
width: 57px;
height: 57px;
background-size: contain;
}
图像最初是 72x72，您让浏览器将它们缩小到 57x57，但 GPU 可能会更正缩放以适合均匀的边界（取决于您机器的显卡）。如果是这样，重新缩放可能会导致父元素调整大小以适应其内容（因为您没有指定溢出行为），这又会导致重新计算包含的元素。
解决方案：将背景图像渲染为 57x57，考虑到它会被圆角化，或者 - 如果可以的话最好 - 将其渲染为 56x56。您还将使 CSS 更轻一点:)
我相信这只是您使用的 Firefox 版本 运行。例如我 使用 Firefox。出现图形错误的 Firefox 版本是 22.0，当我在我的笔记本电脑上查看同样的东西时，使用版本 38.0.1，它在正确的位置。我认为 Firefox 只是执行某些事情的速度较慢，并且在不更新浏览器的情况下无法完成某些方面。
我认为在您的场景中也发生了同样的事情。因此，这些图像的风格化方式使您的 Firefox 版本不完全支持；它尽力向您展示它们，但就是做不到。
我通过访问相应的 w3schools 页面测试了几个 css 属性，唯一似乎有任何图形错误的样式是 background-size:contain。但是，这只发生在更早版本的 Firefox 上，它可能与您使用的版本不同运行。
我继续这个 Firefox website 它说你需要：
a browser that supports scaling background images (such as Firefox 3.6 or later)
使用 background-size:contain;.
最终答案：您的 Firefox 版本不完全支持background-size:contain;所以有一些视觉错误。
这是我见过的最奇怪的事情。
我有一个 class of div 有一个背景图像，定义如下：
background-image: url("circle.png")
background-size: contain
您可以在此处查看 div：Rouvou.com/fiction。它们被称为 .circle-blue 或 .circle-red，并且两个 class 的行为相同。
所以这就是它变得奇怪的地方：在带有 ThinkVision 显示器的 Lenovo ThinkCentre 机器上，使用 Firefox，它们 "pulsate" 迅速，或者宽度和高度向右和向下增长一个像素，然后再次收缩, 非常快, 像闪烁。
由于联想是只安装了两个浏览器的学校计算机，我唯一可以测试的其他浏览器是IE，在其中没有发现这种行为。我希望我可以在这里 post 视频来展示它，但这是其中一个 div 的屏幕截图：
我已经在许多其他类型的机器上的几乎所有浏览器上测试过它，我发现这种行为的唯一地方是 Lenovo ThinkCentre 上的 Firefox，带有 ThinkVision 显示器。我还测试了大约 20 个不同的 ThinkCentres，并且在每个 ThinkCentres 上都显示此错误。
有没有人运行以前遇到过类似的事情？可能是什么原因造成的？谁能至少在 machine/browser 上重现该问题？
如果需要的话，我使用的是 Firefox 31.0。
只是一个想法，不知道它是否有帮助，因为我无法在我的机器上测试它，但是你试过在你的 div 上设置 max-width 和 max-height 吗？在检查它们时，它们只设置了 width 和 height。
尝试将它们设置为相同的宽度和高度：
max-width: 57px;
max-height: 57px;
您也可以尝试设置 min-height 和 min-width:
min-width: 57px;
min-height: 57px;
您能否清除浏览器中加载的所有 CSS
CTRL+SHIFT+DELETE
我也有一种感觉，有不止一个 CSS 个文件指向 div 的 id。您也可以更新您的浏览器。
我无法在没有访问其中一台机器的情况下对其进行测试，但在查看您的页面后，我可以 99% 肯定地说问题实际上是下面规则的 background-size: contain 部分。 Firefox 在那个浏览器版本中才开始支持它，它可能还有点问题。
(http://caniuse.com/#feat=background-img-opts)
另一件让我相信是这种情况的事情是，当不应用该规则时，背景图像会像您描述的那样向右和向下扩展。
由于这些点的大小在调整页面大小时不会改变，解决方法是在 Gimp 或 Photoshop 中手动将图像调整为正确的大小，而不是尝试在飞。这个小的清理也会对页面的整体 loading/rendering 进行小幅改进。
如果您确实需要调整图像大小，您的选择是使用带有 width: 100%; height: auto 的 img 标签并将文本覆盖在顶部，或者制作一个更大的图像，其中只有两个- 色调颜色和水平斜线。我可能只是将其全部设为正方形图像，然后将其添加为 background-image，位置设置为 center/center（如果需要调整大小时，将斜线保持在正确的位置）并设置 border-radius 在 div 到 div 大小的 50%，再次成为一个圆圈。
#category .category-thing .category-thing-right-wrapper-wrapper .category-thing-right-wrapper {
display: inline-block;
position: absolute;
width: 57px;
height: 57px;
background-size: contain;
}
图像最初是 72x72，您让浏览器将它们缩小到 57x57，但 GPU 可能会更正缩放以适合均匀的边界（取决于您机器的显卡）。如果是这样，重新缩放可能会导致父元素调整大小以适应其内容（因为您没有指定溢出行为），这又会导致重新计算包含的元素。
解决方案：将背景图像渲染为 57x57，考虑到它会被圆角化，或者 - 如果可以的话最好 - 将其渲染为 56x56。您还将使 CSS 更轻一点:)
我相信这只是您使用的 Firefox 版本 运行。例如我
我认为在您的场景中也发生了同样的事情。因此，这些图像的风格化方式使您的 Firefox 版本不完全支持；它尽力向您展示它们，但就是做不到。
我通过访问相应的 w3schools 页面测试了几个 css 属性，唯一似乎有任何图形错误的样式是 background-size:contain。但是，这只发生在更早版本的 Firefox 上，它可能与您使用的版本不同运行。
我继续这个 Firefox website 它说你需要：
a browser that supports scaling background images (such as Firefox 3.6 or later)
使用 background-size:contain;.
最终答案：您的 Firefox 版本不完全支持background-size:contain;所以有一些视觉错误。