CSS：只读选择器 - 中断：在 IE 11 中禁用

Question

我的经验是，添加包含 :read-only 的 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 中的一个问题（在第 11 版中测试）。在 Chrome 中，它按预期工作。

删除 textarea.not_ok_class:read-only, 行将使其在 IE 中工作。

为什么 :read-only 伪选择器会破坏其他 CSS 选择器？ 我错过了什么？

提前致谢

Answer 1

您遇到的问题是 IE 不理解 :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>