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并将'logo'类直接应用于A元素，是否存在错误或兼容性问题？就像这样：

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

Answer 1

这样做没有错。您需要为要应用于非块级别元素的维度添加display：block，但是对于如何读取和爬网站点，不会对您造成伤害。

Answer 2

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

其他一些注意事项：

除HTML5以外的doctype实际上无法在div 块元素（在本例中为<a>） >
您应该在<a>内放置一个文本用于SEO /屏幕阅读器目的，并使用text-indent:-999px和overflow:hidden隐藏文字。 display:block是不必要的float:left隐式设置它。

Answer 3

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

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

正如其他人所说的那样使用带有背景的标签是安全的，但通常我会在div中使用徽标并在顶部使用锚点。祝好运 ; ）

Answer 4

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

并且您无法为背景图像指定文本替代方法。请改为使用内容图片：

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

此处“ACME”将替换为链接页面的描述性名称或缩写。

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

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

4 个答案: