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 锚点标签是否符合被禁用的属性？