html - 在 html “A” 元素中应用背景图像是错误的吗？

Question

我曾经使用以下结构来保存带有 div 内链接的徽标：

    <a href="http://mysite.com">
        <div class="logo"></div>
    </a>

使用以下 CSS：

    .logo {
        float: left;
        width: 120px;
        height: 24px;
        background: url('logo.png') no-repeat;
    }

如果我删除 DIV 并将“徽标”类直接应用于 A 元素，是错误的还是兼容性有任何问题？像这样：

    <a href="http://mysite.com" class="logo"></a>

score 1 · Accepted Answer

这样做并没有错。您将需要添加 display:block 以将尺寸应用于非块级元素，但至于网站的读取和爬网方式，不，它不会伤害您。

score 1 · Accepted Answer

不，这没什么错。这样做实际上更好，减少冗余标记。

其他一些需要注意的事项：

除了HTML5将块元素（在本例中为div）放入<a>
<a>您应该在SEO/屏幕阅读器中放置一个文本，并使用text-indent:-999px和隐藏文本overflow:hidden。display:block是不必要的，因为float:left它是隐式设置的。

score 0 · Accepted Answer

您可以使用以下方法使 img 成为块元素：

 .logo {
        float: left;
        width: 120px;
        height: 24px;
        background: url('logo.png') no-repeat;
        display:block;
    }

正如其他人所说，使用带有背景的 a-tag 是安全的，但通常我在 div 中有徽标，在顶部有一个锚点。祝你好运 ; )

score 0 · Accepted Answer

它造成了一个重大的可访问性问题，直接违反了现代可访问性指南 WCAG 2.0 的指南 1.1：“为任何非文本内容提供文本替代品，以便将其更改为人们需要的其他形式，例如大字体、盲文、语音、符号或更简单的语言。” 元素内容a为空，显示背景图片，开启CSS并开启图片加载；但没有文字替代品。

而且您不能为背景图像指定替代文本。改用内容图像：

<a href="..."><img src="logo.png" alt="ACME"></a>

这里的“ACME”将被链接页面的描述性名称或缩写替换。

默认情况下，作为链接的图像具有彩色边框，与链接文本颜色相同。您可以通过border="0"在img标签或a img { border: none }CSS 中使用来删除它。

4 回答 4