Question

＆＃13;

#top_container
{  
   padding-bottom: 5px;
   background: #d1d1ff;
   background: -webkit-gradient(linear, left top, left bottom, from(#7db9e8), to(#1e5799));
   background: -moz-linear-gradient(#d1ffff, #d1d1ff);
   background: -o-linear-gradient(#d1ffff, #d1d1ff);
   background: -webkit-linear-gradient(#d1ffff, #d1d1ff);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffff', endColorstr='#d1d1ff',gradientType=0 );
   background: -ms-linear-gradient(top, #d1ffff 30%, #d1d1ff 100%);
   background:linear-gradient(to bottom, #d1ffff 30%, #d1d1ff 70%);
}

＆＃13;

正在正确显示渐变，除了在IE10中 - 我已经搜索了其他可能使用的语法版本，并尝试了-ms-linear-gradient和linear-gradient的许多不同版本。

还有什么可以注意到这一点不被展示。背景＃d1d1ff正在容器中显示。

Answer 1

jsFiddle使用Ultimate CSS Gradient Generator构建。很多在线工具！添加了最小高度，以便在jsFiddle上正确显示，如果您复制此代码，请确保删除它。

CSS：

#top_container {  
    min-height: 200px;
    padding-bottom: 5px;
    background: #d1ffff;
    background: -moz-linear-gradient(top,  #d1ffff 0%, #d1d1ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d1ffff), color-stop(100%,#d1d1ff));
    background: -webkit-linear-gradient(top,  #d1ffff 0%,#d1d1ff 100%);
    background: -o-linear-gradient(top,  #d1ffff 0%,#d1d1ff 100%);
    background: -ms-linear-gradient(top,  #d1ffff 0%,#d1d1ff 100%);
    background: linear-gradient(to bottom,  #d1ffff 0%,#d1d1ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffff', endColorstr='#d1d1ff',GradientType=0 );
}

在IE10中背景渐变不能正确渲染

1 个答案: