把一个div变成一个链接

Question

我有一个 <div> 块，其中包含一些我不想更改的精美视觉内容。我想让它成为一个可点击的链接。

我正在寻找类似 <a href="…"><div> … </div></a> 的内容，但这是有效的 XHTML 1.1。

原文由 EE. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来到这里是希望找到比我更好的解决方案，但我不喜欢这里提供的任何解决方案。我认为你们中的一些人误解了这个问题。 OP 想让一个充满内容的 div 表现得像一个链接。这方面的一个例子是 facebook 广告——如果你看，它们实际上是正确的标记。

对我来说，禁忌是：javascript（不应该只需要一个链接，而且 SEO/可访问性非常差）；无效的 HTML。

本质上是这样的：

• 使用常规 CSS 技术和有效的 HTML 构建您的面板。
• 如果用户在面板上单击（您也可以有其他链接），则在其中某处放置一个您希望成为默认链接的链接。
• 在该链接内，放置一个空的 span 标签（ <span></span> ，而不是 <span /> - 谢谢@Campey）
• 给面板位置：相对
• 将以下 CSS 应用于空跨度：

   {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left: 0;

    z-index: 1;

    /* fixes overlap error in IE7/8,
       make sure you have an empty gif */
    background-image: url('empty.gif');
  }

它现在将覆盖面板，因为它位于 <A> 标签内，所以它是一个可点击的链接

• 给出面板内的任何其他链接 position:relative 和合适的 z-index (>1) 将它们放在默认跨度链接的前面

原文由 thepeer 发布，翻译遵循 CC BY-SA 3.0 许可协议