0

透明な div に使用したいくつかの小さな png ファイルをゆっくりと削除し、それらを CSS コードに置き換えています。

この CSS コードは FF と IE9-10 で機能し、テキスト ボックスのスタイル設定に役立ちます (クリックすると背景が変更され、赤い 1 ピクセルの境界線が追加されます)。

#searchbars input {
    width: 130px;
    border: 1px solid #FFF;
    padding: 4px 2px 2px 10px;
    font-size: .9em;
    font-family: Helvetica, Arial, sans-serif;
    height: 16px;

    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(22, 22, 22) transparent; /* #161616 /
    /* RGBa with 0.28 opacity */
    background: rgba(22, 22, 22, 0.28);
    color: #FFF;
}

#searchbars input:active,
#searchbars input:focus {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(22, 22, 22) transparent; /* #161616 /
    /* RGBa with 0.75 opacity */
    background: rgba(22, 22, 22, 0.75); 
    border: 1px solid #ff8277;
}

IE7 の条件付きスタイルシートは次のとおりです。

    /* For IE 5.5 - 7*/
    #searchbars input {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616);
}

#searchbars input:active, #searchbars input:focus {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616);
}

IE8 条件付きシート:

    /* For IE 8*/
   #searchbars input {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616)";
}

#searchbars input:active, #searchbars input:focus {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616)";
}

IE10 開発者ツールを使用し、IE7-8-9 エンジンを使用してページをレンダリングしようとしました。

IE9/10/Firefox -> すべてが期待どおりに動作します

IE8 -> デフォルトの背景と、テキスト ボックス ( ) をクリックしたときの背景の変更input:focusは、予期したものではありません。アルファ 16 進値が正しいにもかかわらず、不透明度が適用されていないようです。

IE7 -> デフォルトの背景が機能します。テキストボックス ( ) をクリックしたときの背景の変更がinput:focus機能しません。また、クリックしてもテキストボックスの境界線は赤くなりません（border: 1px solid #ff8277;元のシートのプロパティを参照）

デモページはこちら: http://www.flapane.com/calcio.php

検索ボックスは、ソーシャル共有ボタンの右側の右上隅にあります。

ヒントはありますか？

前もって感謝します

4

1 に答える 1

1

ここで起こっているのは、通常のbackground宣言がfilters.

これを修正するには、2 番目のスタイルシートを介して、または同じドキュメント内で宣言に追加することによって、LTE IE8 のみに追加background: noneします。inputs\9

background: none\9;*background: none;IE7 以下を対象とするワイルドカード ハック ( ) や、_background: none;IE6 以下を対象とするアンダースコア ハック ( ) と同様に、IE8 以下を対象とします。ただし、最初のものだけを使用する必要があります。

于 2013-09-29T08:09:59.413 に答える