HTML 錨點標籤是否符合被禁用的屬性？

問題描述

如果我創建一個 HTML 錨標籤並將 disabled 屬性設置為 true，我會在不同的瀏覽器中獲得不同的行為 (驚喜！驚喜！) 。

我創建了一個 fiddle 來演示。

在 IE9 中，鏈接呈灰色，不會轉移到 HREF 位置。在 Chrome /FF /Safari 中，鏈接是正常顏色，並將轉移到 HREF 位置。

正確的行為應該是什麼？ IE9 渲染錯誤，我應該實現一些 CSS 和 javascript 來修復它; 還是 Chrome /FF /Safari 不正確，最終會趕上？

提前致謝。

最佳解決方案

在這種情況下，IE 似乎表現不正確。

請參閲 HTML5 規範

The IDL attribute disabled only applies to style sheet links. When the link element defines a style sheet link, then the disabled attribute behaves as defined for the alternative style sheets DOM. For all other link elements it always return false and does nothing on setting.

http://dev.w3.org/html5/spec/Overview.html#the-link-element

HTML4 規範甚至不提 disabled

http://www.w3.org/TR/html401/struct/links.html#h-12.2

編輯

我認為跨瀏覽器獲得這種效果的唯一方法是 js /css，如下所示：

#link{
    text-decoration:none;
    color: #ccc;
}

$('#link').click(function(e){
    e.preventDefault();
});

示例：http://jsfiddle.net/jasongennaro/QGWcn/

次佳解決方案

我必須根據其他條件等將這個行為修復到一個具有很多錨點的網站，這個錨點被啓用/禁用，這個屬性可能不是很理想，但是在這種情況下，如果你不想修復每個錨的代碼單獨地，這將為所有的錨點做點竅門：

$('a').each(function () {
    $(this).click(function (e) {
        if ($(this).attr('disabled')) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });
    var events = $._data ? $._data(this, 'events') : $(this).data('events');
    events.click.splice(0, 0, events.click.pop());
});

和：

a[disabled] {
    color: gray;
    text-decoration: none;
}

第三種解決方案

disabled 是一種僅適用於 standards 的 input 元素的屬性。 IE 可能支持 a，但是如果要符合標準，則需要使用 CSS /JS 。

參考文獻

Should the HTML Anchor Tag Honor the Disabled Attribute?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

HTML 錨點標籤是否符合被禁用的屬性？