css - 渐变在 IE 8+ 中不起作用

Question

我无法在 IE 8+ 中使用渐变。

.answerbox {
    height: 125px; /*Specify Height*/
    width:  251px; /*Specify Width*/
    border: 1px solid #D9D9D9;
    border-radius: 3px 3px 3px 3px;
    position: relative;
    margin-bottom: 15px;
    background: -moz-linear-gradient(#FFFFFF, #E6E6E9) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(#FFFFFF, #E6E6E9) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E6E6E9)) repeat scroll 0 0 transparent; /* older webkit syntax */
    background: -webkit-linear-gradient(#FFFFFF, #E6E6E9) repeat scroll 0 0 transparent;
    word-wrap: break-word;
    padding: 7px;
}

.shadow {
  -moz-box-shadow:    0 0 4px #9A9EAD;
  -webkit-box-shadow: 0 0 4px #9A9EAD;
  box-shadow:         0 0 4px #9A9EAD;
}

预期输出：

电流输出：

Answer 1

实际上，您使用的 css3 在 ie 中不完全受支持，并确保您可以在此处检查您使用的 css 以及它是否支持。

假设您使用的渐变在 ie9 及以下版本中不起作用，因此您必须为此使用过滤器检查此代码

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

为了更好地理解，请通过此链接

并box shadow使用它而不是您的代码并根据您进行安排

你可以在这里找到更好的解释

.shadow1 {
    margin: 40px;
    background-color: rgb(68,68,68); /* Needed for IEs */

    -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}

Answer 2

您遇到的问题是 Internet Explorer 不是 Mozilla ( moz) 浏览器；也不是 Opera ( o) 浏览器；它也不是 WebKit ( webkit) 浏览器。查看您的背景样式：

background: -moz-...;
background: -o-...;
background: -webkit-...;

对于 IE10，您可能需要使用ms前缀，而对于旧版本，您需要使用filter.

background: -ms-...;
filter: ...;

但是当然你仍然缺少一件事：原生 CSS 实现linear-gradient：

background: linear-gradient(...);

我建议使用http://www.colorzilla.com/gradient-editor/在 CSS 中生成背景渐变。