요소에 그라디언트를 추가하면 IE의 CSS 기능이 중단됩니다.

Question

CSS 기반 드롭 다운 메뉴에서 작업 중입니다. 요소에 그라디언트를 추가 할 때까지 제대로 작동합니다. IE에서 무언가가 깨지기 때문에 서브 메뉴의 <li> 항목 위로 마우스를 가져 가면 메뉴 상자가 사라집니다. 여기

내가 그라데이션을 추가하고 호환이 크로스 브라우저를 만들기 위해 사용하는 코드입니다 :

background-color: #c1ddf4; /* for non-css3 browsers */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c1ddf4', endColorstr='#ffffff', GradientType=0); /* for IE */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c1ddf4), color-stop(100%, #ffffff));/* for webkit browsers */ 
background: -moz-linear-gradient(top, #c1ddf4, #ffffff); /* for firefox 3.6+ */ 
background-image: -o-linear-gradient(#c1ddf4, #ffffff); 

다음 예를 참조하십시오

OK(without gradient) 대 NOT OK(with gradient)

Answer 1

IE의이 을 것이다 필터링 요소에 적용 할 때 특정 기능을 중단합니다. 내 제안은 IE 용 CSS 해킹, IE 전용 스타일 시트 또는 Modernizr.js을 사용하여 가로 방향으로 바둑판 식으로 그라디언트 이미지를 사용하는 것입니다. 대신 이미지를 제공 받게됩니다

.no-cssgradients li { 
    background: url(gradient.png) repeat-y; 
} 

그 방법, CSS 그라디언트를 지원하지 않는 브라우저 (단지 IE) :

진정으로 적절한 방법은이 CSS를 작성 모더 나이저를 사용하는 것입니다.