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學校，希望它能對您有所啟發。

干杯，阿倫