So codieren Sie Anchor-Tags als Blockelement, um andere Blockelemente zu enthalten

Question

Ich habe das gleiche Problem wie in dieser thread beschrieben. Ich frage mich, ob es andere Möglichkeiten gibt, das gleiche Ergebnis zu erzielen und dieses Problem zu vermeiden.

Anscheinend hat Firefox Probleme mit Anchor-Tags, die Blockelemente enthalten, selbst wenn die Anzeige-CSS-Eigenschaft des Anchor-Tags auf "Blockieren" eingestellt ist. Der Effekt, den ich erreichen möchte, besteht darin, einen vollständigen Block klickbar zu haben, anstatt den Text im Block. Es ermöglicht auch, den Hover-Status auf den gesamten Block anstelle des Link-Teils anzuwenden.

Kann jemand empfehlen, eine Technik

EDIT:

Dies ist, was ich zu zeigen beabsichtigen:

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

Dies ist, was firefox macht:

<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

Wenn ich normalerweise brauchen eine <div> innerhalb eines <a>, verwende ich ein <span> statt mit display:block;. Unterbricht das Layout in Firefox nicht mit dem oben genannten Bug und verhält sich genau so, wie es ein <div> tut.

Answer 2

Nur ein verwenden verankern mit Display zu blockieren. Wenn du sagst, was ich denke, sagst du, dann war ich vor einer Weile in der gleichen Situation - ich wollte Bilder in einem Blockanker platzieren, ohne die Unterstreichung unter dem Bild. Dies wurde gelöst, indem float: left; auf den Tag img angewendet wurde.

Zum Beispiel:

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

Wenn Sie diese in mehr li-Tags setzen, dann können Sie ein sehr einfaches Menü mit anklickbaren Blöcken erhalten.

Wenn dies nicht das ist, was Sie wollen, dann geben Sie bitte ein Beispiel, wo Sie ein Blockelement in einem Block Anker wollen - ich verstehe nicht, wo Sie so etwas wollen.

Richard

Answer 3

In Bootstrap scheinen sie die Regel position: relative zu den Anker-Tags innerhalb der Klasse .nav hinzuzufügen. Wenn Sie diese Regel zum Anker-Tag hinzufügen, sollte sie als klickbarer Hyperlink fungieren.

Ich habe es gerade versucht, und es scheint auf allen modernen Browsern zu funktionieren! Ich habe dies noch nicht in älteren Browsern getestet.