自昨天以来我一直在努力解决一个令人困惑的问题，因此基本上我正在构建一个类似于Windows 8的网站，其中每个框都是一个列表项，它比我要编写的代码要复杂得多，但问题却有所缩小在下面..
<ul>
<li>
<a href="#" class="box">
<ul>
<li>Logos</li>
<li>Book covers</li>
<li>Magazines</li>
<li>Wedding invitations</li>
</ul>
<img src="image.jpg">
</a>
</li>
</ul>
CSS：
.box {
display: block;
width: 600px;
height: 300px;
position: relative;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
到目前为止，它可以按预期正常运行，并且图像包含在.box中，并且隐藏了溢出。但是，一旦我在子ul列表项之后添加了锚标记...。
<ul>
<li>
<a href="#" class="box">
<ul>
<li><a href="#">Logos</a></li>
<li>Book covers</li>
<li>Magazines</li>
<li>Wedding invitations</li>
</ul>
<img src="graphic.jpg">
</a>
</li>
</ul>
溢出变得可见，图像可见性占据了所有可用空间，仅在.box边界中不再可见。为什么会这样呢？以及如何解决？
您不能在另一个锚中嵌套锚，这很可能是您造成问题的原因*。有几种选择，具体取决于您要实现的目标：
删除，a.box然后在每个列表项中添加链接，如下所示：
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
或添加一些JavaScript以仅在单击“徽标”列表项时打开相关链接。您可以在此处使用jQuery查看此示例。相关代码为：
$('[data-href]').on('click', function() {
window.open($(this).data('href'));
});
然后在html中：
<li data-href="http://www.google.com">Logos</li>
*无效。不同的浏览器的行为可能会有所不同，因为它们都尝试并通过不同程度的成功来“修复”无效的标记。在这里，您的第一个锚点关闭得太早，这会导致布局崩溃。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句