为啥这个 CSS 不适用于 Android 上的 Chrome，但适用于其他任何地方？

Posted 2023-03-06

【中文标题】为啥这个 CSS 不适用于 Android 上的 Chrome，但适用于其他任何地方？

【英文标题】：Why does this CSS not work for Chrome on Android but works everywhere else?为什么这个 CSS 不适用于 Android 上的 Chrome，但适用于其他任何地方？

【发布时间】：2012-12-11 10:31:36

【问题描述】：

这真的让我很困惑。我想让 pic.jpg 在背景中保持静态（滚动时不移动）并且不会拉伸。

它适用于除 android 上的 Chrome 之外的所有浏览器（即 Chrome、Safari、Firefox）（它甚至适用于 Android 原始浏览器）

body
        background-color: transparent !important;
        background-image: url(<%= asset_path "pic.jpg" %>);

        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    

Chrome for Android 将其呈现为 pic.jpg 在屏幕的中间位置，而不是在整个页面上，并且在滚动时不会保持静止状态..

我无法在 jsfiddle 上重现它，我也尝试用我的 Android 手机调试它，但似乎没有任何帮助。

这不就是创建背景图片的方式吗？

【问题讨论】：

你能给我们一个这个页面的链接吗？或最后类似的例子

【参考方案1】：

我不想残忍，但这个问题大约在 4 年前就已经被报道过

http://code.google.com/p/android/issues/detail?id=3301

最近的回复可以帮助我猜：

在我对 Android 的实验中，我注意到正文中的所有其他 DIV 都正常运行，包括居中，所以我将图像移动到另一个 DIV 并且它工作正常。

有趣的一个。

最好的

【讨论】：

残忍？更像是有帮助的。可惜已经 4 年了，android 的 chrome 仍然不支持基本功能.. 甚至苹果也支持这一点。

'even apple'，你成就了我的一天 :-D 仅供参考，当其他现代浏览器没有任何问题时，最新的 Magento 管理登录区域无法在 chrome 上运行（linux/windows 测试）。我不得不承认 chrome 是我最喜欢的浏览器，但一些错误开始提醒我 IE6.

【参考方案2】：

我有类似的问题..我用这个来解决它

html
 height:100%;
 min-height:100%;

body
 min-height:100%;

【参考方案3】：

我找到了一种解决方法，可以使背景在 Chrome for Android 上正确显示：在 html 标记中定义背景，而不是正文。这是新的 CSS：

html
    background-color: transparent !important;
    background-image: url(<%= asset_path "pic.jpg" %>);

    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

And yes, this is valid markup。以我的经验，背景在所有其他浏览器中仍然可以正常工作。

【讨论】：

在background-size 属性上设置!important 标志也对我有用。