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

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

css google-chrome

Chrome/IE 11中的CSS渐变背景大小,css,google-chrome,gradient,linear-gradients,Css,Google Chrome,Gradient,Linear Gradients,Chrome似乎没有遵循CSS3中解释背景大小属性的规范考虑以下标记 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing</title> <style type="text/css"> html {height: 100%;}

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>


测试
html{高度：100%；}
身体{高度：100%；}
div{
身高：100%；
背景图像：线性渐变（至右下角，红色、绿色、蓝色）；
背景大小：30%；
}

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

用于“背景大小”属性状态的

第一个值给出相应图像的宽度，第二个值给出其高度。如果只给出一个值，则假定第二个值为自动

因此，在本例中，就好像我声明了

背景大小：30%auto

及

一个维度的自动值是通过使用图像的固有比率和另一维度的大小来解析的，否则，使用图像的固有大小，否则，将其视为100%

美国呢

术语固有尺寸是指固有高度、固有宽度和固有高宽比（宽度和高度之间的比率）的集合，对于给定的对象，每一个都可能存在，也可能不存在。。。本规范中定义的CSS渐变是一个完全没有内在维度的对象示例

因此，auto应该默认为100%，就好像我声明了

背景大小：30%100%

。目前，我正以明确声明的方式解决这一问题

这正是Firefox（56.0.1）显示页面的方式

然而，铬合金（62.0.3202.62）却没有。它获得了正确的宽度（我可能在屏幕截图中剪掉了一点边缘，但最右边的重复看起来应该是10%），但似乎也将高度解释为30%。IE 11看起来与Chrome显示屏完全相同

所以，我的问题是：

我对规范的解释正确吗？CSS的最新版本（第4版）：《权威指南》似乎支持我的解释，也支持位于的页面（这表明此属性在某个点上发生了更改）

如果是的话，这是一个已知的错误，在铬正在工作/修复？没有列出Chrome的任何已知问题

如果没有，我该如何报告Chrome中的一个bug（因为没有IE 12，它显然无法在那里修复，但可能在Edge中工作，也可能不工作）

在chromium bug页面上似乎有一个bug报告。对于同一问题，WebKit也为此提交了一份bug报告。这两个报告都包含一个测试用例，用于根据规范进行正确的行为。

想知道添加开始和结束div标记是否会产生差异。@wazz你是什么意思？将

替换为

？我只是尝试了一下，但它并没有改变行为（我也没有看到任何应该改变的理由）。我不是真的在寻找解决方法（我有一个-明确声明100%的高度），但我更关心的是根据规范确定哪种行为是正确的，如果Chrome是错误的，确保报告并最终在以后的更新中修复（我不知道Chrome bug报告在哪里）。我理解。这只是一个随机的想法。MDN明确表示，“如果使用a作为背景并指定背景大小，最好不要指定使用单个自动组件的大小，或者仅使用宽度值（例如，背景大小：50%）指定大小。在这种情况下，Firefox 8中的s渲染发生了变化，目前各浏览器之间通常不一致，这些浏览器并不完全按照CSS3背景大小规范和CSS3图像值渐变规范进行渲染。”@wazz这就是我所指的，当我说该网站表明该物业已发生变化（加上同一页上的脚注1）。这就是为什么我非常确定我对规范的解释是正确的（以及提到的这本书似乎与我的观点一致，并且作者是这方面的权威）。然而，该网站指的是相对较旧的Chrome版本。如果它不正确的话，我希望它现在已经被修复了。因此，我的第二个和第三个问题（如果是错误的，我希望caniuse.com会提到不一致性）。