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.

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.

Can anyone suggest a technique

EDIT:

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>

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>

回答1:

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.

回答2:

In Bootstrap, they seem to add the rule position: relative to the anchor tags inside of the .nav class. If you add this rule to the anchor tag, it should act as a clickable hyperlink.

I just tried it, and it seems to work on all modern browsers! I haven't tested this in any legacy browsers yet.

回答3:

Just use an anchor with display set to block. If you are saying what I think you are saying then I was in the same situation a while back - wanting to place images within a block anchor, without the underline under the image. This was resolved by applying float: left; to the img tag.

For example:

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

If you place this inside several li tags then you can get a very simple menu with clickable blocks.

If this is not what you want then please give an example of where you would want a block element in a block anchor - I dont understand where you would want such a thing.

Richard

来源：https://stackoverflow.com/questions/3891957/how-to-code-anchor-tags-as-block-element-to-contain-other-block-elements