如何将锚标签编码为块元素以包含其他块元素 [英] How to code anchor tags as block element to contain other block elements

问题描述

我遇到此主题中描述的相同问题>。我想知道是否有其他方法来实现相同的结果，并避免这个问题。

I am experiencing the same problem described in this thread. I'm wondering if there are other ways to achieve the same result and avoid this issue.

显然，Firefox有包含块元素的锚标签的问题，即使显示CSS属性的锚标签被设置为块。我想实现的效果是有一个完整的块可点击，而不是块中的文本。

Apparently Firefox has issues with anchor tags containing block elements even when the display CSS property of the anchor tag is set to "block". The effect that I am trying to achieve is to have a the complete block click-able instead of the the text in the block. It also allows to apply the hover state to the whole block instead of the link part.

任何人都可以提出技巧

编辑：

这是我打算显示的内容：

This is what I intend to show:

<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呈现的：

This is what firefox renders:

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

推荐答案

当我通常需要< div> 在< a> 内，我使用< span> 而不是 display：block; 。不会破坏Firefox中的布局，具有上述错误，并且与< div> 完全一样。

When I would normally need a <div> inside an <a>, I use a <span> instead with display:block;. Doesn't break the layout in Firefox with the aforementioned bug and behaves exactly as a <div> does.

这篇关于如何将锚标签编码为块元素以包含其他块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！