Question

我有一个令人困惑的问题，自昨天以来我一直在努力，所以基本上我正在构建一个类似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边界中可见。为什么会这样？以及如何修复它？

Answer 1

你不能在另一个中嵌套锚，这可能是你的问题的原因*。根据您要实现的目标，有几种选择：

删除a.box并在每个列表项中包含您的链接，如下所示：

<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>

或者只在点击“徽标”列表项时添加一些JavaScript才能打开相关链接。您可以使用jQuery here查看此示例。相关代码是：

$('[data-href]').on('click', function() {
    window.open($(this).data('href'));
});

然后在html：

<li data-href="http://www.google.com">Logos</li>

*它无效。不同的浏览器可能会有不同的行为，因为它们都会尝试并“修复”无效的标记，并取得不同程度的成功。在这里，您的第一个锚点过早关闭，导致布局崩溃。

Answer 2

在您的代码中，您在另一个a标记内有一个a标记...但您无法执行此操作。 Nested Links are illegal ...它被解释为您的第一个a标记被下一个标记关闭。

为什么添加子锚点会使溢出在其父锚点上可见？

2 个答案: