0

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;

}
4

2 に答える 2

0

コードに接頭辞を付ける以外に、ファイルへの参照の直後-pie-など、追加の利点のためにこれを追加できます。position:relativepie.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の場合はわかりません。これらのタイプのスタイルで動作するのは非常に古いです。

于 2012-07-13T05:04:21.863 に答える
0

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;
}
于 2012-07-13T05:11:28.690 に答える