IE에 CSS PIE 스타일을 적용 할 수 없습니다. *

Question

CSS PIE을 IE 6-8 (9-10 테스트 안 함)과 함께 사용하는 데 문제가 있습니다. 적용 할 "선택된"스타일을 얻으려고합니다. 누가 이것이 잘못 될지 알 수 있습니까?

건배

크롬 + FF - 나쁜 잘

즉, 결과 =

외에 -pie-와 코드 접두어에서

<div class="tabBox"> 
     <ul class="tabs"> 
      <li id="step1" class="selected"><a href="#"><span class="tabTitle">STEP 1:</span><span class="tabSubtitle">Step 1</span></a></li> 
      <li id="step2"><a href="#"><span class="tabTitle">STEP 2:</span><span class="tabSubtitle">Step 2</span></a></li> 
      <li id="step3"><a href="#"><span class="tabTitle">STEP 3:</span><span class="tabSubtitle">Step 3</span></a></li> 
     </ul> 
     <div class="content"> 
     </div> 
    </div> 

.tabBox 
{ 
padding: 0 3px; 
font-size: 12px; 
font-family: sans-serif; 

} 

.tabBox .tabs 
{ 
margin: 0; 
overflow: hidden; 
margin-bottom: -1px; 
border-width:1px; 
} 

.tabBox .tabs li 
{ 
float: left; 
list-style: none; 
margin: 0; 
padding: .25em .15em 0; 
overflow: hidden; 
position: relative; 
z-index: 1; 
margin-right: 7px; 
} 

.tabBox .tabs a { 
float: left; 
height: 3em; 
line-height: 2em; 
-webkit-border-radius: 15px 15px 0 0; 
-moz-border-radius: 15px 15px 0 0; 
border-radius: 15px 15px 0 0; 
background: #cbc3b7; 
background: -moz-linear-gradient(top, #cbc3b7 0%, #c4bdb1 84%, #aea79e 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbc3b7), color-stop(84%,#c4bdb1), color-stop(100%,#aea79e)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #cbc3b7 0%,#c4bdb1 84%,#aea79e 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #cbc3b7 0%,#c4bdb1 84%,#aea79e 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #cbc3b7 0%,#c4bdb1 84%,#aea79e 100%); /* IE10+ */ 
background: linear-gradient(top, #cbc3b7 0%,#c4bdb1 84%,#aea79e 100%); /* W3C */ 
-pie-background: linear-gradient(top, #cbc3b7 0%,#c4bdb1 84%,#aea79e 100%); /* W3C */ 
border: 1px solid #CCC; 
border-bottom: 0; 
padding: 0 10px; 
padding-top:7px; 
color: #000; 
text-decoration: none; 
behavior: url(../Content/behaviours/PIE_uncompressed.htc); 
width: 218px; 
margin: -1px; 
} 

.tabBox .tabs a span 
{ 
padding-left:12px; 
} 


.tabBox .tabs .selected a 
{ 
background: -ms-linear-gradient(top, #cbc3b7 0%,#c4bdb1 84%,#000000 100%); 
background: #ece9e6; 
-webkit-box-shadow: #CCC 0 0 .25em; 
-moz-box-shadow: #CCC 0 0 .25em; 
box-shadow: #CCC 0 0 .25em; 
} 

.tabBox .tabs li 
{ 
float: left; 
list-style: none; 
margin: 0; 
padding: .25em .15em 0; 
overflow: hidden; 
position: relative; 
z-index: 1; 
margin-right: 7px;  
} 

.tabBox .tabs a span 
{ 
padding-left:12px; 

} 

Answer 1

파이는 특성이 -pie-로 시작하는 polyfilled되고 필요하므로 당신은 작성해야 :

.tabBox .tabs .selected a 
{ 
background: -ms-linear-gradient(top, #cbc3b7 0%,#c4bdb1 84%,#000000 100%); 
-pie-background: linear-gradient(top, #cbc3b7 0%,#c4bdb1 84%,#000000 100%); 
background: #ece9e6; 
-webkit-box-shadow: #CCC 0 0 .25em; 
-moz-box-shadow: #CCC 0 0 .25em; 
-pie-box-shadow: #CCC 0 0 .25em; 
box-shadow: #CCC 0 0 .25em; 
} 

Answer 2

당신은 즉 여분의 이익을 위해 position:relative을이 바로 추가 할 수 있습니다 pie.htc 파일을 참조한 후

.tabBox .tabs .selected a 
{ 
    background: -ms-linear-gradient(top, #cbc3b7 0%,#c4bdb1 84%,#000000 100%); 
    -pie-background: linear-gradient(top, #cbc3b7 0%,#c4bdb1 84%,#000000 100%); 
    background: #ece9e6; 
    -webkit-box-shadow: #CCC 0 0 .25em; 
    -moz-box-shadow: #CCC 0 0 .25em; 
    -pie-box-shadow: #CCC 0 0 .25em; 
    box-shadow: #CCC 0 0 .25em; 
    behavior:url(pie.htc); 
    position:relative; 
} 

는 그러나 Pie.htc는 (7-8-9)를 즉 또한 그라데이션 효과 (만 선형 그라데이션)에 둥근 모서리를 적용 할 수 없습니다. 그러나 IE-6의 경우 확실하지 않습니다. 그것의 아주 오래된 스타일의 이러한 유형으로 작동합니다.