css - 将一个 div 变成一个链接

Question

我有一个 <div>用一些我不想改变的花哨的视觉内容来阻止。我想让它成为一个可点击的链接。

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

Answer 1

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

对我来说，禁忌是:javascript(不应该仅仅用于链接，而且非常糟糕的 SEO/可访问性)；无效的 HTML。

本质上是这样的:

• 使用普通的 CSS 技术和有效的 HTML 构建您的面板。
• 如果用户单击面板，则在其中的某处放置一个您希望成为默认链接的链接(您也可以有其他链接)。
• 在该链接中，放置一个空的 span 标签(<span></span>，而不是 <span /> - 感谢@Campey)
• 给出面板position:relative

• 将以下 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) 中提供任何其他链接，以将它们带到默认跨度链接的前面