如何将锚标记编码为块元素以包含其他块元素答案

【问题标题】：How to code anchor tags as block element to contain other block elements如何将锚标记编码为块元素以包含其他块元素
【发布时间】：2010-10-08 15:20:32
【问题描述】：

我遇到了thread 中描述的相同问题。我想知道是否有其他方法可以达到相同的结果并避免此问题。

显然，即使锚标签的显示 CSS 属性设置为“块”，Firefox 也存在包含块元素的锚标签问题。我想要达到的效果是有一个完整的块可点击而不是块中的文本。它还允许将悬停状态应用于整个块而不是链接部分。

谁能推荐一个技巧

编辑：

这就是我打算展示的内容：

<div class="entry ">
    <a class="link" href="/topics/34/steroids">
        <h2>Some Text</h2>
        <div class="info">
             <div class="tag-visualization">
                  <div style="width: 67%;" class="guage"></div>
             </div>
             <ul class="stats">
                  <li>
                       <strong>0</strong><br>FOLLOWERS
                  </li>
                  <li>
                       <strong>2</strong><br>ANSWERS
                  </li>
                  <li>
                       <strong>2</strong><br>QUESTIONS
                  </li>
             </ul>
         </div>
     </a>
</div>

这是 firefox 渲染的内容：

<div class="entry ">
     <a class="link" href="/topics/45/diet">
     </a><h2><a _moz-rs-heading="" class="link" href="/topi/45/diet">sometext</a></h2>
     <a class="link" href="/topics/45/diet">                        </a><div class="info">
<a class="link" href="/topics/45/diet">                
                            </a><div class="tag-visualization">
<a class="link" href="/topics/45/diet">                                </a><div style="width: 67%;" class="guage"></div>
<a class="link" href="/topics/45/diet">                            </a></div>
<a class="link" href="/topics/45/diet">                            </a><ul class="stats">
<a class="link" href="/topics/45/diet">                                </a><li>
<a class="link" href="/topics/45/diet">                                    <strong>0</strong><br>FOLLOWERS
                                </a></li>
<a class="link" href="/topics/45/diet">                                </a><li>
<a class="link" href="/topics/45/diet">                                    <strong>2</strong><br>ANSWERS
                                </a></li>
<a class="link" href="/topics/45/diet">                                </a><li>
<a class="link" href="/topics/45/diet">                                    <strong>2</strong><br>QUESTIONS
                                </a></li>
<a class="link" href="/topics/45/diet">                            </a></ul>
<a class="link" href="/topics/45/diet">                        </a></div>
<a class="link" href="/topics/45/diet">                    </a>
                </div>

【问题讨论】：

标签： firefox html css

【解决方案1】：

当我通常在<a> 中需要<div> 时，我会使用<span> 而不是display:block;。不会因上述错误而破坏 Firefox 中的布局，其行为与 <div> 完全相同。

【讨论】：

你是冠军，我希望我能做的不仅仅是勾选你的答案并投票

【解决方案2】：

在 Bootstrap 中，他们似乎将规则 position: relative 添加到 .nav 类的锚标记中。如果将此规则添加到锚标记，它应该充当可点击的超链接。

我刚试过，它似乎适用于所有现代浏览器！我还没有在任何旧版浏览器中对此进行测试。

【讨论】：

【解决方案3】：

只需使用显示设置为阻止的锚。如果你说的是我认为你在说的话，那么我前一段时间也处于同样的情况 - 想要将图像放置在块锚中，图像下方没有下划线。通过将float: left; 应用于img 标记已解决此问题。

例如：

<a href="events.htm" style="display: block"><img style="float: left" src="calendar.gif" />Events</a>

如果你把它放在几个 li 标签中，那么你可以得到一个带有可点击块的非常简单的菜单。

如果这不是你想要的，那么请举例说明你想要块锚中的块元素 - 我不明白你想要这样的东西。

理查德

【讨论】：