有效的XHTML错误 - <a></a> </div>中不允许<div>

Question

我正在尝试将我的文档验证为XHTML 1.0 Transitional。我有以下错误：

  

第73行，第137栏：文档类型不允许元素“div”在这里;   缺少“对象”，“小程序”，“地图”，“iframe”，“按钮”，“ins”之一，   “del”start-tag

这对应于此代码：

<td><a href="download.php?f='.$file.'"><div class="download"></div></a></td>

我所知道的是不正确的，因为＆lt; a＆gt;不能包含＆lt; div>标签。 CSS代码是：

.download { 
    width:30px;
    height:24px;
    background:url('../images/download.png') 0 0; }

    .download:hover{ background:url('../images/download.png') 0 -24px;}

我正在尝试显示下载文件的链接，CSS放置图像和悬停图像，这些是：

但反转标签顺序如：

<td><div class="download"><a href="download.php?f='.$file.'"></a></div></td>

显示正确的图像和悬停图像，但不是可点击的链接！

我不知道如何显示正确的链接！

谢谢！

Answer 1

该链接无法点击，因为它是内联的并且为空。这意味着它的宽度和高度为零，因此基本上是不可见的。您应该将<a>转换为块元素（因此它将自动调整为父元素的宽度），并将其调整为其父元素（div）的固定高度：

.download a { display: block; height: 100%; }

当然这是有效的标记：

<td><div class="download"><a href="download.php?f='.$file.'"></a></div></td>

jsFiddle Demo（背景颜色简单，但没有区别）

Answer 2

为什么不像使用.download类那样设置标记样式并删除div。例如，从

更改它

<td><div class="download"><a href="download.php?f='.$file.'"></a></div></td>

到

<td><a class="download" href="download.php?f='.$file.'"></a></td>