IE9에서 상자의 색상이 다릅니 까?

Question

상자가 크롬, 사파리 및 파이어 폭스에 적합한 색상을 표시합니다. 그러나 IE에서는 상자 색상이 노란색/금색입니다. 내가 겪고있는 문제는 아래 그림을 참조하십시오.

해결 방법?

파이어 폭스 :

IE9 :

<div id="container105"> 
     <div class="bubbleouter"> 
      <div class="bubbleinner"><CENTER><BOLD>VUL KOSTENLOOS DE OFFERTE IN EN WIJ BEREKEN DE PRIJS VAN UW SPECIFIEKE RIT<BOLD></CENTER></div> 
     </div> 
    </div> 

CSS 코드 :

} 
.bubbleouter { 
    position:relative; 
    padding:3px; 
    margin:0; 
     width:280px; 
     z-index:99; 
     background:-webkit-gradient(linear, left top, left bottom, from(#272727), to(#222222)); 
    background:-moz-linear-gradient(top, #272727, #222222); 
    background:-o-linear-gradient(top, #272727, #222222); 


    /* css3 */ 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
} 

.bubbleouter:after { 
    content:""; 
    display:block; /* reduce the damage in FF3.0 */ 
    position:absolute; 
    top:-13px; /* value = - border-top-width - border-bottom-width */ 
    left:50%; /* controls horizontal position */ 
     margin:0 0 0 -18px; 
    width:0; 
    height:0; 
     z-index:99; 
    border-width:0 18px 14px; /* vary these values to change the angle of the vertex */ 
    border-style:solid; 
    border-color:#222222 transparent; 
} 

.bubbleinner { 
    position:relative; 
    padding:15px; 
    margin:0; 
    color:#eee; 
     text-align:center; 
     z-index:100; 
    text-shadow:0px -1px 1px rgba(0, 0, 0, 0.8); 
    background:#f3961c; /* default background for browsers without gradient support */ 
     border-top:1px solid #666666; 

    /* css3 */ 
    -moz-border-radius:7px; 
    -webkit-border-radius:7px; 
    border-radius:7px; 
    /* NOTE: webkit gradient implementation is not as per spec */ 
    background:-webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444)); 
    background:-moz-linear-gradient(top, #666666, #444444); 
    background:-o-linear-gradient(top, #666666, #444444); 
} 



.bubbleinner:after { 
    content:""; 
    display:block; /* reduce the damage in FF3.0 */ 
    position:absolute; 
    top:-13px; /* value = - border-top-width - border-bottom-width */ 
    left:50%; /* controls horizontal position */ 
     margin:0 0 0 -16px; 
    width:0; 
    height:0; 
     z-index:99; 
    border-width:0 16px 12px; /* vary these values to change the angle of the vertex */ 
    border-style:solid; 
    border-color:#666666 transparent; 
} 

,536,913,632

JSFIDDLE이

HTML 코드를 (IE에서이 예제를 엽니 다) 10

Answer 1

당신은 그라데이션 스와없이 브라우저에서 해당 색상을 지정한 DMA 장치 :

background:#f3961c; /* default background for browsers without gradient support */ 

변경 당신의 디자인으로 작동하는 색 :

background:#666; /* default background for browsers without gradient support */ 

Answer 2

귀하의 문제는 배경 속성입니다 :

background:-webkit-gradient(linear, left top, left bottom, from(#272727), to(#222222)); 
background:-moz-linear-gradient(top, #272727, #222222); 
background:-o-linear-gradient(top, #272727, #222222); 

-webkit-*를 대상으로 웹킷 브라우저 (IE는하지 않은). -moz-*은 Mozilla Firefox를 대상으로합니다. -o-*은 Opera를 대상으로합니다. 당신의 색상으로, .bubbleouter 당신이 원하는 거라고 사용 http://www.colorzilla.com/gradient-editor/

:

모든 지원하는 브라우저에서 그라데이션 배경을 사용하려면

이 꽤 멋진 자원

background: #272727; /* Old browsers */ 
background: -moz-linear-gradient(top, #272727 0%, #222222 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#272727), color-stop(100%,#222222)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #272727 0%,#222222 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #272727 0%,#222222 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #272727 0%,#222222 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #272727 0%,#222222 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#272727', endColorstr='#222222',GradientType=0); /* IE6-9 */ 

.. .and bubbleinner에 대한 당신이 원하는 것 :

background: #666666; /* Old browsers */ 
background: -moz-linear-gradient(top, #666666 0%, #444444 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#444444)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #666666 0%,#444444 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #666666 0%,#444444 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #666666 0%,#444444 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #666666 0%,#444444 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444',GradientType=0); /* IE6-9 */ 

Answer 3

그라디언트 선언하기 전에 다음 줄을 추가합니다 : IE는하지 않기 때문에

background : #272727; 

버그 발생 그라디언트를 지원합니다. 는이 필터는 드롭 그림자와 국경 반경을 존중하지 않는

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#272727', endColorstr='#222222',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 

같은 필터를 사용하지 마십시오.

Answer 4

IE9는 CSS 그래디언트를 지원하지 않으므로 그라디언트가 무시 된 후 상자의 기본 배경색이 표시됩니다.

가장 쉬운 대답은보다 합리적인 기본값 인 background 스타일을 제공하는 것입니다. 그래디언트를 지원하지 않는 브라우저는 원하는 색상에 가까운 색상을 얻을 수 있습니다.

IE에서 그라디언트를 지원하려면 IE 고유의 filter 스타일을 사용하면되지만 가능하면 구문이 끔찍하고 최종 결과가 버그가 될 수 있으므로 가능한 한 피하십시오 (특히 다른 CSS3 스타일과 함께 사용).

더 좋은 해결책은 CSS3Pie 라이브러리를 사용하여 IE에 패치를 적용하여 CSS3 스타일 그라데이션을 지원하는 것입니다. CSS3Pie는 모든 버전의 IE (6-9)에서 작동하며 IE9에 그라디언트, 그라디언트, 상자 그림자 및 IE8에 테두리 반경을 추가합니다. 이렇게하면 그라데이션으로 IE9를 제대로 지원할 수 있습니다.

희망이 있습니다.