CSS：読み取り専用セレクタ - Disrupts：IE 11で無効にされました

Question

私は、CSSセレクタを追加すると、他のCSSセレクタをInternet Explorerで動作させないようにします。以上により

textarea { 
 
    margin: 5px; 
 
} 
 

 
textarea.ok_class:disabled, 
 
textarea.ok_class:disabled { 
 
    border: 1px solid green; 
 
} 
 

 
textarea.not_ok_class:read-only, 
 
textarea.not_ok_class:disabled, 
 
textarea.not_ok_class:disabled { 
 
    border: 1px solid red; 
 
}

<textarea name="ta_1" disabled class="ok_class">Without read-only 1</textarea> 
 
<br> 
 
<textarea name="ta_2" disabled class="ok_class">Without read-only 2</textarea> 
 
<br> 
 
<textarea name="ta_3" disabled class="not_ok_class">With read-only 1</textarea> 
 
<br> 
 
<textarea name="ta_4" disabled class="not_ok_class">With read-only 2</textarea>

、境界線がnot_ok_classクラスで無効なテキストエリアのためない赤です。

これは、Internet Explorerでのみ問題です（v。11でテスト済み）。 Chromeでは期待どおりに動作しています。

行を削除する textarea.not_ok_class：読み取り専用、はIEで動作します。

：読み取り専用疑似セレクタが他のCSSセレクタを中断するのはなぜですか？ 私は何が欠けていますか？事前

Answer 1

あなたが抱えている問題で

おかげでIEは、単に1つのセレクタ、それは全体のブロックを無効にすることを無視するのではなく、:read-onlyセレクタを理解していないということです。

回避策は、:read-onlyセレクタをそれ自身のブロックに分けることです。これは少し無意味なようだが、それはあなたがIEが同様:disabledセレクタを無効に進んでいないために取得するつもりだ唯一の方法です：私はすでに可能な解決策として、これをテストした

textarea { 
 
    margin: 5px; 
 
} 
 

 
textarea.ok_class:disabled, 
 
textarea.ok_class:disabled { 
 
    border: 1px solid green; 
 
} 
 

 
textarea.not_ok_class:read-only { 
 
    border: 1px solid red; 
 
} 
 

 
textarea.not_ok_class:disabled, 
 
textarea.not_ok_class:disabled { 
 
    border: 1px solid red; 
 
}

<textarea name="ta_1" disabled class="ok_class">Without read-only 1</textarea> 
 
<br> 
 
<textarea name="ta_2" disabled class="ok_class">Without read-only 2</textarea> 
 
<br> 
 
<textarea name="ta_3" disabled class="not_ok_class">With read-only 1</textarea> 
 
<br> 
 
<textarea name="ta_4" disabled class="not_ok_class">With read-only 2</textarea>