2011-08-31 7 views
8

다음 CSS 비트를 사용하여 선형 배경 그라데이션을 만듭니다. IE8/9, FF, Safari 및 크롬에서는 정상적으로 작동하지만 IE7에서는 정상적으로 작동하지 않는 것 같습니다. IE7은 단색 (녹색) 배경을 보여줍니다. 여기 내 코드는CSS가있는 IE7의 배경 그라디언트

.menu_body a { 
    display:block; 
    color:#006699; 
    background: #008800; 
    /* Mozilla: */ 
    background: -moz-linear-gradient(top, #0b71a4, #025f8e); 
    /* Chrome, Safari:*/ 
    background: -webkit-gradient(linear, 
      left top, left bottom, from(#0b71a4), to(#025f8e)); 
    /* MSIE */ 
    filter: progid:DXImageTransform.Microsoft.Gradient(
      StartColorStr='#0b71a4', EndColorStr='#025f8e', GradientType=0); 
    padding: 1px 18px; 
} 

답변

18

IE에서 < = 7 인 경우 요소가 layout이 아니면 필터가 작동하지 않습니다.

zoom: 1; 

, 그것은 다른 문제를 일으킬 수 있다는 것을 알고 있어야 너무 오래된 좋은 background-image는 안전하고 신뢰할 수있는 솔루션이 될 수 있습니다.

또한 CSS에는 Opera, IE10 및 웹킷 구문이 업데이트 된 그라디언트 속성이 없습니다.

+1

감사합니다. (비록 내가 새로운 회원, 미안 해요 원인 투표를 줄 수 없습니다) 편집 : 웹킷에 대한 업데이트 된 구문에 대한 - webkit-linear-gradient() 오른쪽 사용할 수 있습니까? – Kiwi1

+0

@Schimmel Correct; 구문은 다른 공급 업체 접두어를 제외하고 Firefox 및 IE10과 동일합니다. 그건 그렇고, 당신은 왼쪽에있는 확인란을 클릭하여 내 대답을 수락 할 수 있어야합니다. – duri

+0

@ duri - IE10? 그게 뭔가 새로운거야? :) – Dementic

0

있는이의 매개 변수 변환하면 내가 확실 해요 대소 문자를 구분합니다 -하지만 대부분의 CSS는 다른으로보고, 당신은 시도 할 수 :

startColorstr='#0b71a4', endColorstr='#025f8e' 

공지 사항 하단 케이스를 시작 문자 및 소문자 str 접미사.

+0

해결책을 시도했지만 불행히도 작동하지 않았습니다. 또한 모든 경우에 더 낮은 케이스를 주려고했지만 또한 제대로 작동하지 않는 것 같았습니다. – Kiwi1

+0

'progid : DXImageTransform.Microsoft.gradient'로 시도해보십시오 - 소문자의'gradient'에 유의하십시오. –

+0

답장을 보내 주셔서 감사합니다.하지만 불행히도 이것도 작동하지 않았습니다. 다음 문서에 따르면이 변환은 Internet Explorer 5.5 이상에서 작동하므로 혼란 스럽습니다. 참조 : http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx – Kiwi1

2

올바른 구문은 다음과 같습니다

filter: progid:DXImageTransform.Microsoft.gradient 
(startColorstr=#550000FF, endColorstr=#55FFFF00) 

이는 MSDN 소스 here를 참조

> IE4에 의해 지원됩니다.

관련 문제