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中，无论我做什么，焦点都集中在我的一个按钮上。该按钮似乎窃取了焦点属性，并且页面从不关注任何输入字段，因此字段永远不会在它们被标签化时带有边框。可能是造成这个问题的原因是什么？

Answer 1

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

Answer 2

您是否尝试将标签索引属性设置为页面元素。所有主流浏览器都支持此属性。支持浏览器的有：IE，safari，firefox，chrome。

Answer 3

“该按钮似乎窃取了焦点属性，并且页面从不会聚焦在任何输入字段上，因此当它们被标记时，字段永远不会显示在它们周围。”

如果我清楚地理解你的问题那么你在从一个元素到另一个元素的选项卡上有问题吗？

如果是这种情况，那么带有增加索引值（或任何顺序）的tab-index将允许你选择下一个元素基于tab-index设置的Tab键，DOCTYPE Tag指定标记语言的规则，以便浏览器正确呈现内容。当然，Doctype中的更改往往会在页面中发生更改。快速浏览w3学校关于doctype的信息，希望它可以发现一些亮点。

干杯，阿伦

IE8 + IE9 HTML和CSS Focus

3 个答案: