css在Chrome和IE中不工作

Question

我是html和css的新手。這裏是我的CSS代碼：

background: -moz-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0); 

這個背景色效果在IE和Chrome不工作如何改變這種代碼工作。

Answer 1

你只爲Mozilla做了漸變，您需要做的是針對IE和Chrome分別

請檢查這個網站了，因爲它會做的代碼你，但是，提供意見，所以你得到一個想法如何每個瀏覽器響應的代碼

http://www.colorzilla.com/gradient-editor/

實施例代碼

background: #1e5799; /* Old browsers */ 
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); /* IE6-9 */ 

Answer 2

每一行檢查文檔https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient。它取決於瀏覽器使用的JavaScript引擎。

作爲它規定爲跨瀏覽該文檔：

.grad { 
    background-color: #F07575; /* fallback color if gradients are not supported */ 
    background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */ 
    background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */ 
    background-image:  -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/ 
    background-image:  -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 
    background-image:   linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */ 

}

Answer 3

賣方前綴no longer needed爲梯度。

background: linear-gradient(to bottom, #F9F9F9, #F0F0F0); 

完成。

Answer 4

的-moz-前綴僅用於Firefox的 - 所以你需要複製的確切的行中的其他瀏覽器的familys使用方​​法：

background: linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0); 
background: -webkit-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0); 
background: -o-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0); 

Answer 5

-moz-linear-gradient是爲Mozilla瀏覽器（Firefox）。您應該使用webkit-linear-gradient進行鍍鉻。

Answer 6

-moz是Mozilla Firefox的一個前綴，請檢查這個網站： http://colorzilla.com/gradient-editor/ 並通過代碼和註釋看：

background: #1e5799; /* Old browsers */ 
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */