渐变在 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

实际上，您使用的是 ie 中不完全支持的 css3，并确保您可以检查它here 您使用的 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+ */

为了更好地理解，请查看link

对于box shadow，请使用此代码而不是您的代码并根据您的情况进行排列

你可以找到更好的解释here

.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: ...;

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

background: linear-gradient(...);

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