IE8 + IE9 HTML和CSS焦点

Question

我正在处理一个HTML页面，我们希望在其中input字段并select下拉框，以便在整个页面上都可以看到边框，因为它在整个页面上都经过了分页并重点突出。 我在CSS中定义了一个输入类，如下所示：

input.highlight:focus {
border: #003366;
border-style: solid;
border-width: 2px;    
}

输入字段在我的HTML文件中定义，如下所示：

<input class="highlight" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">

在Chrome中，焦点似乎工作正常，但是在IE中，无论我做什么，焦点始终停留在我的按钮之一上。 该按钮似乎窃取了focus属性，并且该页面从不聚焦于任何输入字段，因此在对这些字段进行制表时，它们永远不会显示带有边框。 可能是此问题的原因？

Answer 1

从另一个线程来看，有人能够指出:focus属性仅在IE9中可以识别。 这就解释了为什么jsFiddle版本可以正常工作。 但是，从本地驱动器运行HTML文件时，IE9在IE8及更低版本的兼容模式下运行，并且:focus属性永远不会被识别。

Answer 2

您是否尝试将选项卡索引属性设置为页面元素。 所有主要浏览器均支持此属性。 支持的浏览器是：IE，safari，firefox，chrome。

Answer 3

“该按钮似乎窃取了focus属性，并且该页面永远不会聚焦于任何输入字段，因此，在将它们切换为选项卡时，永远不会在其周围显示边框。”

如果我清楚地理解了您的问题，那么您在从一个元素切换到另一个元素时遇到问题了吗？

如果是这种情况，则索引值（或按任何顺序增加）的tab-index将允许您基于tab-index设置在制表时选择下一个元素，并且DOCTYPE Tag指定了标记语言的规则，因此浏览器正确呈现内容。 当然，Doctype中的更改往往会导致页面中的更改。 快速浏览有关doctype的w3学校，希望它能对您有所启发。

干杯，阿伦