IE9-占位符和背景图像与渐变结合使用的问题

Question

I have a text input field in HTML and the attribute placeholder :

<input type="text" placeholder="Filter results...">

Unfortunately, the placeholder attribute seems not to work? I thought it is implemented in Internet Explorer 9? You can see the demo here: http://jsbin.com/esiya3/5/ - http://jsbin.com/esiya3/5/edit

Also I have a problem with -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#f0f0f0')"; in combination with a background-image . In all other browsers, Firefox, Opera, Safari, Chrome, the gradient and the background-image is displayed. Only in IE 9 the background-image is not there. I have to exclude the gradient, then I can see the image. But what can I do to have both?

Here is the demo with the gradient: http://jsbin.com/esiya3/5/ - http://jsbin.com/esiya3/5/edit

and without the gradient: http://jsbin.com/esiya3/6/ - http://jsbin.com/esiya3/6/edit

Perhaps someone have an idea?

Thank you in advance & Best Regards.

Answer 1

You could combine a gradient filter with an alpa image loader:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png')
    progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0');

to solve the gradient-picture problem.

Answer 2

you can use svg for background-image. you should with svg tag create your gradiant & save it with etension .svg , then load it in css file.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <linearGradient id="g">
<stop offset="0" stop-color="blue" />
<stop offset="0.3" stop-color="yellow" />
<stop offset="0.6" stop-color="orange" />
<stop offset="1" stop-color="red" />
  </linearGradient>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
</svg>

css file

div{background-image: url(gradient.svg);}