IE9 : 필터를 사용할 때 링크에 문제가 발생했습니다.

Question

내 문제 : 디스플레이 블록과 링크되어 있습니다. IE9에서는 모든 것이 잘 진행됩니다. 그러나 그래디언트를 얻기 위해 필터를 추가하면 커서는 테두리와 텍스트 위에 만 손을 갖게되고 나머지 상자에는 손이 없습니다.

내가 jsfiddle

내 코드를 테스트해야 내가 뭔가 잘못했을까요? 내 코드는 모든 브라우저와 버전에서 작동합니다. 나는 분명히하기 위해서 다른 브라우저에 대한 코드를 지울 뿐이다.

Answer 1

filter은 IE8에서 더 잘 작동합니다. IE9의 경우 SVG 그라디언트를 추천합니다.

/* SVG as background image (IE9/Chrome/Safari/Opera) */ 
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc); 

을 그리고 당신의 규칙에이 방법을 추가 할 수 있습니다 : 여기에

당신은 마이크로 소프트가

SVG gradient background maker 공식 당신은 이런 식으로 뭔가를 얻을 수 있습니다 찾을 수 있습니다 그리고

a { 
    padding: 3px 5px; 
    margin:5px; 
    display:block; 
    border:1px solid #000; 
    background:#FAFAFA; /* fallback for browsers not supporting gradients */ 
    background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc); /* FF13, Opera12, IE9 */ 
    background:linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent; /* W3C */ 
} 

을, conditional comments으로 다시 타겟팅 할 수 있습니다.

.ie8 a { 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA')); 
} 

어쨌든 완벽한 크로스 브라우저 코드를 사용하려면 "Visual CSS 도구"로 Google에 제안하십시오.

Answer 2

당신은 -moz-linear-gradient 만 사용하고 있으며 이전 버전의 Mozilla에서만 작동합니다.

IE9를 들어 당신은 또한 CSS3을 사용할 수 있습니다 : 당신이 IE에 대한 -webkit-linear-gradient 오페라 -o-linear-gradient과 -ms-을 (하지만 모두가 함께 잘 작동)를 사용한다 크롬과 사파리의 이전 버전 linear-gradient: { ... }

합니다.

Answer 3

하나의 해결책은 a을 다른 div에 랩핑하고 a 대신에 배경 속성을 적용하는 것입니다.

<div class = "container"><a href="/">Glee is awesome!</a></div> 

CSS :

.container { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA')); 
    background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent; 
    border: 1px solid #000; 
    padding: 3px 5px; 
    margin: 5px; 
} 
a { 
    display: block; 
} 

여기에 약간의 데모입니다 : little link.