Question

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

显然，即使将anchor标记的显示CSS属性设置为“block”，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>

Answer 1

如果我在<div>内通常需要<a>，我会使用<span>代替display:block;。不会破坏Firefox中具有上述错误的布局，其行为与<div>完全相同。

Answer 2

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

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

Answer 3

只需使用显示设置为阻止的锚点即可。如果你正在说我认为你在说什么，那么我曾经处于相同的状态 - 想要将图像放在一个块锚中，而不是图像下面的下划线。通过将float: left;应用于img代码来解决此问题。

例如：

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

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

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

理查德

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

3 个答案: