5

Internet Explorer 9 でボックス シャドウを使用しようとすると、ゴースト、アーティファクト、または一般的な不安定さが発生します。

目標は、テキスト領域のグループを作成し、フォーカスするとボックスの影で強調表示されるようにすることです。これはほとんどのブラウザーで問題なく動作しますが、IE9 で要素を循環させると、次のような動作が見られます。

ボックス シャドウの例

上記の例では、3 番目のテキスト領域が 2 番目のテキスト領域にフォーカスを失います。ボックスの影の左右は、3 番目のテキスト領域では消えず、2 番目のテキスト領域には表示されません。

再現するコードは以下です。この問題は、2 番目と 3 番目のテキスト領域の間でフォーカスを切り替えるときに発生します。

HTML

<label>Text Area 1:</label>
<textarea class="sampleClass"></textarea><br /><br />
<label>Text Area 2:</label>
<textarea  class="sampleClass"></textarea><br /><br />
<label>Text Area 3:</label>
<textarea  class="sampleClass"></textarea><br /><br />

CSS

.sampleClass
{
    border:1px solid #ccc;
}

.sampleClass:focus
{
    box-shadow: 0px 0px 12px rgba(255,0,0,.8);
}

コードもここで見ることができます。

ここで何が起こっているのですか？

4

1 に答える 1

-2

ヒントがあります... 多くの場合、PIE を使用できます。

http://css3pie.com/

これにより、「Internet Explorer 6 ～ 9 で、最も有用な CSS3 装飾機能のいくつかをレンダリングできるようになります」。

とても助かりました！

于 2012-09-29T22:28:00.137 に答える