2011-01-17 6 views
0

와 함께 자리와 배경 이미지에 문제 나 HTML의 텍스트 입력 필드와 속성 placeholder이 : 불행하게도는 IE9 - 그라데이션

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

을의 placeholder 속성이 작동하지 않을 것 같다? Internet Explorer 9에서이 기능이 구현 된 것 같습니다. 당신은 여기 데모를 볼 수 있습니다 http://jsbin.com/esiya3/5/-http://jsbin.com/esiya3/5/edit

이 또한 내가 background-image와 함께 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#f0f0f0')";에 문제가 있습니다. 다른 모든 브라우저에서는 Firefox, Opera, Safari, Chrome, 그라디언트 및 배경 이미지가 표시됩니다. IE 9에서만 배경 이미지가 존재하지 않습니다. 그래디언트를 제외하고 이미지를 볼 수 있습니다. 하지만 둘 다 가질 수 있을까요? 여기

은 그라디언트 데모입니다 : http://jsbin.com/esiya3/5/ - http://jsbin.com/esiya3/5/edit

과 그라데이션없이 : 이 http://jsbin.com/esiya3/6/ - http://jsbin.com/esiya3/6/edit

은 아마도 누군가가 아이디어가?

고맙습니다. & 최고 감사합니다.

+0

IE9 어려운 것을해야한다 "작업"을 결정 할 수있는, 아직 베타 버전입니다. – tawman

+0

오, 알았어. 그러나 그라디언트가있는 문제는 해결 방법이 있습니까? – Tim

답변

3

당신은 ALPA 이미지 로더 그라디언트 필터를 결합 할 수 있습니다 :

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

그라디언트 영상 문제를 해결하기 위해.

2

배경 이미지로 svg를 사용할 수 있습니다. svg 태그로 그래디언트 &을 etension .svg와 함께 저장 한 다음 CSS 파일로로드해야합니다.

<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 파일

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