IE9 - Problem mit Platzhalter und Hintergrund-Bild in Kombination mit Farbverlauf

Question

ich in HTML ein Texteingabefeld habe und das Attribut placeholder:

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

Leider ist das placeholder Attribut scheint nicht zu funktionieren? Ich dachte, es ist in Internet Explorer 9 implementiert? Sie können die Demo sehen hier: http://jsbin.com/esiya3/5/-http://jsbin.com/esiya3/5/edit

Auch habe ich ein Problem mit -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#f0f0f0')"; in Kombination mit einem background-image. In allen anderen Browsern werden Firefox, Opera, Safari, Chrome, der Farbverlauf und das Hintergrundbild angezeigt. Nur im IE 9 ist das Hintergrundbild nicht vorhanden. Ich muss den Farbverlauf ausschließen, dann kann ich das Bild sehen. Aber was kann ich tun, um beides zu haben? Hier

ist die Demo mit dem Farbverlauf: http://jsbin.com/esiya3/5/-http://jsbin.com/esiya3/5/edit

und ohne Steigung: http://jsbin.com/esiya3/6/ - http://jsbin.com/esiya3/6/edit

Vielleicht hat jemand eine Idee?

Vielen Dank im Voraus & Mit freundlichen Grüßen.

Answer 1

Sie könnten einen Gradienten-Filter mit einem alpa Bild loader kombinieren:

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

das Gradienten-Bild Problem zu lösen.

Answer 2

können Sie Svg für Hintergrundbild verwenden. sollten Sie mit SVG-Tag erstellen Sie Ihre Gradiant & speichern Sie es mit ETENsion .svg, dann laden Sie es in CSS-Datei.

<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-Datei

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