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中無法正常工作

回答

相關問題