无法将CSS PIE样式应用于IE。*

Question

我无法使用CSS PIE来使用IE 6-8（9-10未经测试）。我正试图让“选定”的风格适用。任何人都可以看到这出错的地方吗？

干杯

chrome + ff - 很好

即结果=糟糕

   <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-为您的代码添加前缀之外，您可以在引用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允许您将圆角应用于ie（7-8-9）以及渐变效果（仅线性渐变）。但我不确定IE-6的情况。它很老，可以使用这些类型的风格。

Answer 2

Pie要求将polyfilled属性作为前缀-pie-，所以你应该写：

.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;
}