CSS渐变在Internet Explorer 11中无法正常工作

-2

问题是，我作为背景的一部分使用的CSS渐变在每120像素后重复使用，而不是占用整个页面长度。经过仔细的实验，我相信我发现问题在于Internet Explorer 11认为页面长度只有120px。我没有在Edge，Firefox或Chrome上遇到这个问题（尽管我被告知Chrome确实有同样的问题，但CSS的编码方式是忽略了网页的高度）。CSS渐变在Internet Explorer 11中无法正常工作

有没有一种方法可以修改CSS来告诉Internet Explorer页面长度不是120px？

相关数据：

与梯度现有的代码是：

body{background: #fdb6b4; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
background: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
background: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
background: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
background: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0); /* IE6-9 */}

链接到有问题的博客，看看到底是什么问题是： http://www.http://madinskincareland.com

以上：如何IE11呈现如下：Firefox 51.0.1如何呈现（包括可用移动设备在内的所有其他测试过的浏览器呈现正常）

来源

2017-02-19 Timothy Kemp

[如何在IE 11上使用线性渐变工作制作背景图像？]（http://stackoverflow.com/questions/19980079/how-to-make-background-image-with-linear-梯度工作即ie-11） – pol

试试这个http://www.colorzilla.com/gradient-editor/ – Rahul

我从colorzilla得到它的代码 –

根据CSS /线性渐变文档，您需要使用背景图像。 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

body{ 
    background-color: #fdb6b4; /* Old browsers */ 
    background-image: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
    background-image: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
    background-image: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
    background-image: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
    background-image: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0); 
}

来源

2017-02-19 16:44:45

刚刚提出了建议，米洛，并没有改变。 –

事实上，它通过摆脱部分的薄荷背景使情况变得更糟。 –

我曾与应用梯度body标签同样的问题。我所做的是在主体内添加另一个标记（例如Main或section），将它放在相对顶部0，左侧0处，然后将渐变应用于该元素。我希望这有帮助！

来源

2017-03-23 14:08:16 Derreck

CSS渐变在Internet Explorer 11中无法正常工作

回答

相关问题