gpt4 book ai didi

Chrome/IE 11 中的 CSS 渐变背景大小

转载 作者:行者123 更新时间:2023-12-02 20:50:39 29 4
gpt4 key购买 nike

Chrome 似乎没有遵循 CSS3 中解释背景大小属性的规范。

考虑以下标记

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing</title>
<style type="text/css">
html {height: 100%;}
body {height: 100%;}
div {
height: 100%;
background-image: linear-gradient(to bottom right,red,green,blue);
background-size: 30%;
}
</style>
</head>
<body>
<div/>
</body>
</html>

这应该放置一个填充 View 并用彩虹渐变装饰的单个 div。我的理解是这个渐变应该是 View 宽度的 30% 和高度的 100%。

specification对于背景大小属性状态

The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be auto.

因此,在这种情况下,就好像我声明了 background-size: 30% auto

An auto value for one dimension is resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%.

specification for gradients

The term intrinsic dimensions refers to the set of the intrinsic height, intrinsic width, and intrinsic aspect ratio (the ratio between the width and height), each of which may or may not exist for a given object... CSS gradients, defined in this specification, are an example of an object with no intrinsic dimensions at all.

因此,auto 应默认为 100%,就好像我声明了 background-size: 30% 100%。目前,我正在解决这个问题,具体声明这一点。

这正是 Firefox (56.0.1) 显示页面的方式。

Firefox capture

但是,Chrome (62.0.3202.62) 则不然。它的宽度正确(我可能在屏幕截图中切掉了一些边缘,但最右边的重复看起来应该是 10% 左右),但似乎将高度解释为 30%。 IE 11 看起来与 Chrome 显示屏完全相同。

Chrome capture

所以,我的问题:

  1. 我对规范的解释是否正确?最新版(第 4 版)CSS:权威指南似乎支持我的解释以及 developer.mozilla.org 页面。 (这表明该属性在某个时刻发生了变化)。
  2. 如果是这样,这是否是 Chrome 中的一个已知错误,正在处理/修复? caniuse.com未列出 Chrome 的任何已知问题。
  3. 如果没有,我该如何报告 Chrome 中的错误(因为没有 IE 12,它显然无法在该版本中修复,但在 Edge 中可能有效,也可能无效)?

最佳答案

似乎有一个错误报告归档为 Issue 711489在 chromium bug 页面。还有一个使用 WebKit 提交的错误报告:Bug 170834 对于同样的问题。两个报告都包含根据规范正确行为的测试用例。

关于Chrome/IE 11 中的 CSS 渐变背景大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46882636/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com