渐变不适用于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中是不完全可支持的，并且确保你可以检查它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中生成背景渐变。