我使用 EXT.Js 框架，但遇到 IE9 问题(在 IE8 和以前的版本中都工作正常):单击时所有复选框附近出现虚线边框。 我试图在主 css 文件中设置:
body.ext-ie input{
outline: none;
}
但它不起作用。
我认为这是关于与我的复选框相关联的标签，但我真的不知道如何修复它。
我的问题的一个例子:
ExtJs 代码，生成这个复选框是:
{
fieldLabel: 'XXXX XXXX',
name: 'XXXX',
xtype: 'checkbox',
disabled: !isXXXXX}
此处提供了一个 css 文件:css file
UPD 1
我已将 ExtJS 文件更正如下: JS:
items [{
fieldLabel: 'xxx',
name: 'xxx',
xtype: 'checkbox',
style: {outline: 'none'},
onfocus: function() {this.style.outline = "none"; }
}]
它生成以下 html:
<div class="x-form-check-wrap" id="ext-gen271" style="width: 180px;">
<input type="checkbox" autocomplete="off" id="ext-comp-1161" name="persistentRecoveryEnabled" class=" x-form-
checkbox x-form-field" style="outline: none;" checked="">
<label for="ext-comp-1161" class="x-form-cb-label" id="ext-gen272"> </label>
</div>
在文档模式 Quirks 模式(页面默认)中，虚线出现在“x-form-cb-label”周围。
在文档模式下，IE9 Standarts 虚线不会出现此设置。
CSS 修改根本没有帮助。
那么，有两个问题:
- 如何通过JS给
class="x-form-cb-label"设置样式？ - 如何通过 JS 将 Document Mode IE9 Standarts 设置为 Page Default？ (html 由 ExtJS 生成)
最佳答案
是的，正如您所怀疑的，它是围绕您的字段的 label 的 outline。
隐藏 outline 的代码不起作用的原因是你在字段中指定了 outline，而不是标签。
(虽然给出了您向我们展示的代码，但我想知道为什么它是一个空格而不是说 XXXX XXXX？)
如果你想隐藏它，你应该使用label作为你的选择器而不是input:
label {
outline: 0;
}
不过，在您这样做之前，值得指出的是，当前所选字段周围的虚线轮廓对于某些用户来说是一项重要功能。特别是，无法使用鼠标的残障用户在使用键盘浏览网站时会依赖它，这样他们就可以知道自己在页面上的位置。
如果您隐藏，您将主动歧视这些用户。 (根据您的网站受众，这对您来说可能不是特别重要，但请注意，这在某些国家/地区是非法的)
关于css - 复选框附近的虚线边框 IE9，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15687147/