IE 5-7（CSS）的渐变

Question

Okay so I am currently having problems with gradients in IE 5-7 (It needs to be in there for comptability reasons.)

I have tried using the following code:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edfdff', endColorstr='#b3e9ef',GradientType=1 ); /* IE6-8 */

However it does not display the gradient at all and simply displays a white background, the other code I am using for IE9+ and IE10+ works fine and has no issues, the same applies for all other browsers and the code used for them.

Answer 1

我通过简单地创建一个1像素的渐变，然后重复它并设置颜色来解决此问题。

background: #edfdff url(images/gradient_slice.png) 0 0 x-repeat; /* Old browsers */

Answer 2

According to MSDN , the element that you apply a gradient to must have layout. That is, it must have either a width , a height or a position , otherwise the gradient won't be visible.

So this jsFiddle works in IE6, but this one does not.

By the way, your own answer does not work like the example in your question. First of all, x-repeat should be repeat-x . And secondly, GradientType=1 repeats vertically, not horizontally.