0

css3pie を使用して、IE8 と IE7 でより多くの css 宣言を認識できるようにしています。これにより、サイトで背景のグラデーションなどをより簡単に使用できます。しかし、css3pie がインセット シャドウの box-shadow スタイルをサポートしていないことがわかりました。次のように、サイトのボタンとインターフェイス要素を 3D に見せるためにボックス シャドウを使用しているため、これは問題です。

a {
    box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
    -moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
    -webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);     

}
a:hover {
        box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
        -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
        -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);     
}

これは、実際のサイトの検索バーの jsfiddleです。すべてのcssを入れているわけではありませんが、重要なのは検索バーの背景+枠、検索ボタンの背景+枠+ホバー効果です。

ここにhtml + cssがあります：

<div class="searchbar">
    <span class="searchFor" id="searchFor">search for</span>
    <input id="txtSearch" type="text"/>
    <span class="btn">
        <a href="javascript:void(0)" id="lnkSearch" onclick="javascript:searchClick()">search</a>
    </span>
</div>

.searchbar {
    padding:.75em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;    

    background-color: #ffd07d; /* fallback color if gradients are not supported */
    background-image: -webkit-gradient(linear, left top, left bottom, #ffd07d, to(#ffa300));
    background-image: -webkit-linear-gradient(top, #ffd07d, #ffa300);
    background-image:    -moz-linear-gradient(top, #ffd07d, #ffa300);
    background-image:     -ms-linear-gradient(top, #ffd07d, #ffa300);
    background-image:      -o-linear-gradient(top, #ffd07d, #ffa300);
    -pie-background: linear-gradient(#ffd07d, #ffa300);
    background-image:         linear-gradient(top, #ffd07d, #ffa300);

    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    -moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    -webkit-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    border: {
        style:solid;
        width:1px;
        color: rgba(255,165,6,0.63);
    }

    behavior: url(PIE.htc); // ie hack: see http://css3pie.com
}

.btn {
    margin-left:1em;
    display:inline-block;
    vertical-align:middle;
    font-size:130%;
    margin-right:0.5em;     
}
.btn a {
    padding: 0.2em 0.8em 0.2em 0.8em;    
    color: #ffffff;

    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;

    background-color: #969696;
    background-image: -webkit-gradient(linear, left top, left bottom, #969696, to(#080808));
    background-image: -webkit-linear-gradient(top, #969696, #080808);
    background-image: -moz-linear-gradient(top, #969696, #080808);
    background-image: -ms-linear-gradient(top, #969696, #080808);
    background-image: -o-linear-gradient(top, #969696, #080808);
    -pie-background: linear-gradient(#969696, #080808);
    background-image: linear-gradient(top, #969696, #080808);
    behavior: url(PIE.htc);

    box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);    
}

.btn a:hover {
     box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);    
}

私がする必要があるのは、どういうわけかbox-shadow構文を別のものに置き換えることです。何を使えばいいですか？私はCSS + Web開発にかなり慣れていないので、利用できるオプションがよくわかりません。あるいは、問題全体に対して取るべき別のアプローチはありますか?

4

1 に答える 1

1

CSS3Pieは一種のバグです。position：relative;を追加してみて、それが何をするかを確認してください。ボックスシャドウはPIEでサポートされている必要があります。

また、CSSフレームワークを使用していますか？そうしないと、CSSが無効になります。これは、自分のやり方でスタイルをネストできないためです。速記を使用するだけです。

border:solid 1px rgba(255,165,6,.63);

最初の-webkitグラデーションは、急速に衰退している古いWebkitブラウザーでのみ使用されるため、おそらく捨てることもできます。

于 2011-10-12T10:40:46.603 に答える