CSS 背景大小忽略第二个值

Question

当我在 BODY 元素样式属性上指定 background-size: 100% 100% 时，WebKit 将其重写为 background-size: 100%。根据规范，相当于 100% auto.

为什么会这样？

Answer 1

根据MDN：

[2] WebKit-based browsers originally implemented an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.

以下最小测试用例在所有其他浏览器中输出“100% 100%”，包括使用 Blink 的 Chrome 版本，并在 Safari 中输出“100%”：

data:text/html,<!DOCTYPE html><body style="background-size: 100% 100%"><script>document.write(document.body.style.backgroundSize);</script>

修改它以使用 -webkit- 前缀在所有 Chrome 版本中输出“100%”，包括那些使用 Blink 的版本，这表明 Chrome 已经离开了它的实验性实现-webkit-background-size，可追溯到 more than a decade，完好无损：

data:text/html,<!DOCTYPE html><body style="-webkit-background-size: 100% 100%"><script>document.write(document.body.style.webkitBackgroundSize);</script>

然而，渲染讲述了一个不同的故事：Chrome 根据 the latest spec 渲染，无论是否使用前缀，我还没有弄清楚 Safari 到底在做什么。 ..

CSS 背景大小忽略第二个值

CSS background-size ignores 2nd value

css

webkit