iPhone/iPad 背景图像出现在错误的元素上

Question

我有一个问题，有时，当我在 HTML 元素上设置背景图像时，它会显示一个完全随机的图像，该图像也被设置为页面其他地方的背景图像。

例如，我有一个具有背景图像“myimage-abc.jpg”的列表项。 我还有一个背景图像为“myimage-123.jpg”的 div。对于大多数人来说，一切都符合预期，但对于一些 Apple 用户（我的总经理就是其中之一），图像“myimage-123.jpg”显示在列表项和 div 上。

以前有没有其他人遇到过这个问题？任何想法如何解决它？

谢谢

Answer 1

在具有不正确背景图像的元素上使用检查元素，并查看哪些 CSS 选择器覆盖了您想要的背景图像。

然后用负责在此处设置元素样式的 CSS 选择器报告回来。请记住，CSS 选择器对您使用它们的方式非常讲究。

直到那时，在我不知道您当前的 CSS 状态的情况下，这可能会导致您的问题。

来自另一个question的回答：

我以前处理过这个问题，这总是一个奇怪的问题。所以这里有一些关于 CSS 行为的想法和示例。

在 CSS 中，我们有一个层次结构，既决定了您如何选择元素，也决定了它在样式表中的位置。以以下 CSS 选择器为例：

body .test-parent .test-child {
    color: red;
}
body .test-parent .test-child {
    color: blue;
}

这种情况下的结果将返回 color: blue; 作为最终样式，因为它是该元素颜色值的最后读取声明。

但是，如果我们声明以下内容：

body .test-parent-two .test-child-two {
    color: red;
}
body .test-child-two {
    color: blue;
}

那么最终的值为color: red;。这让我措手不及，我花了一段时间才注意到这种模式并进行了修复。

这里的问题在于选择器。如JSFiddle 所示，一个更深入的选择器（更长/包含更多中间子级）将覆盖任何其他选择器。

希望也有帮助！