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

Question

我无法让 CSS PIE 与 IE 6-8（9-10 未经测试）一起使用。我正在尝试应用“选定”样式。谁能看到这是哪里出错了？

干杯

铬+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 要求被填充的属性以 为前缀-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;
}