Question

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

为什么会这样？

Answer 1

根据MDN：

[2]基于WebKit的浏览器最初实现了CSS3 background-size的旧草稿，其中省略的第二个值被视为复制第一个值;此草稿不包含contain或cover个关键字。

以下最小测试用例输出＆＃34; 100％100％＆＃34;在所有其他浏览器中，包括使用Blink的Chrome版本，以及输出＆＃34; 100％＆＃34;在Safari中：

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

修改它以使用-webkit-前缀输出＆＃34; 100％＆＃34;在所有版本的Chrome中，包括那些使用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 background-size忽略第二个值

1 个答案: