1
4

3 回答 3

2

解决方案：将 DOCTYPE 声明为 HTML5

<!DOCTYPE html>

与 HTML4 相比，HTML5 中添加、更改、调整和删除了很多东西。您可以在 w3c 上查看差异列表。您所追求的更改是引入Content-Model的更改之一。

a 元素现在具有透明的内容模型（除了它不允许交互式内容后代），这意味着它具有与其父级相同的内容模型。这意味着 a 元素现在可以包含例如 div 元素，如果其父元素允许流式内容。

于 2013-05-19T08:28:03.183 回答
1

什么在做验证？HTML5 不再有这个限制，所以我的解决方案是使用 HTML5 doctype

<!DOCTYPE html>

HTML 5 中的“块级链接”

于 2013-05-19T08:19:18.933 回答
0

你确定display:block没有工作？您是否正在尝试实现类似jsFiddle的目标？即使整个表格单元格可点击？

这是CSS：

td { width: 50%; }
.big { font-size: 1.5em; }
.nolink { display: block; background-color: yellow; }
.nolink:hover { background-color: #939393; }
.nolink .icon { 
    display: inline-block; 
    width: 21px; 
    height: 21px;
    background-image: url('https://abs.twimg.com/a/1368740917/t1/img/twitter_web_sprite_icons.png');
    background-position: 0 -110px;

}

这是HTML：

<table border=1 width="100%">
    <tr>
        <td>column 1 text</td>
        <td>
            <a href="#1" class="nolink">
                <span class="icon"></span>
                <span class="big">1.</span>
                First thing to do
            </a>
        </td>
    </tr>
</table>

[编辑] 更新了在锚链接中添加图标/图像精灵的代码： Working jSFiddle Demo

于 2013-05-19T08:34:17.430 回答