Question

我的经验是，添加一个CSS选择器包括：只读将使其他CSS选择器无法在Internet Explorer中工作。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

使用上面的内容，对于带有not_ok_class类的禁用textareas，边框不为红色。

这只是Internet Explorer中的一个问题（在第11版中测试过）。在Chrome中，它按预期工作。

删除行 textarea.not_ok_class：只读，将使其在IE中正常工作。

为什么：只读伪选择器会破坏其他CSS选择器？我错过了什么？

提前致谢

Answer 1

您遇到的问题是IE不了解:read-only选择器，而不是简单地忽略一个选择器，它会使整个块无效。

解决方法是将:read-only选择器分隔到它自己的块中。这似乎有点无意义，但这是你让IE不再使:disabled选择器失效的唯一方法：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: