3

我有一个从昨天开始就一直在努力解决的令人困惑的问题，所以基本上我正在构建一个类似 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 边界中可见。为什么会这样？我该如何解决？

4

2 回答 2

2

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

删除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>

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

于 2013-11-07T12:51:02.310 回答
2

在您的代码中，您a在另一个标签内有一个a标签......但您不能这样做。嵌套链接是非法的......它被解释为您的第一个a标签被下一个标签关闭。

于 2013-11-07T12:53:51.757 回答