Come codificare i tag di ancoraggio come elemento di blocco per contenere altri elementi di blocco

Question

Ho riscontrato lo stesso problema descritto in questo thread. Mi chiedo se ci sono altri modi per ottenere lo stesso risultato ed evitare questo problema.

A quanto pare Firefox ha problemi con i tag di ancoraggio contenenti elementi di blocco anche quando la proprietà CSS di visualizzazione del tag di ancoraggio è impostata su "blocco". L'effetto che sto cercando di ottenere è di avere un blocco completo cliccabile al posto del testo nel blocco. Permette anche di applicare lo stato di passaggio del mouse sull'intero blocco anziché sulla parte del collegamento.

Qualcuno può suggerire una tecnica

EDIT:

Questo è quello che ho intenzione di mostrare:

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

Questo è ciò che Firefox rende:

<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

Quando ho normalmente bisogno di un <div> all'interno di un <a>, io uso un <span> invece con display:block;. Non infrange il layout in Firefox con il bug sopracitato e si comporta esattamente come fa <div>.

Answer 2

Basta utilizzare un ancora con display impostato su blocco. Se stai dicendo quello che penso tu stia dicendo, mi trovavo nella stessa situazione da un po 'di tempo indietro, volendo posizionare le immagini all'interno di un ancoraggio, senza la sottolineatura sotto l'immagine. Ciò è stato risolto applicando float: left; al tag img.

Ad esempio:

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

Se si inserisce questo all'interno di diversi tag li allora si può ottenere un menu molto semplice con blocchi cliccabili.

Se questo non è ciò che si desidera, si prega di fornire un esempio di dove si vorrebbe un elemento di blocco in un ancoraggio di blocco - Non capisco dove si vorrebbe una cosa del genere.

Richard

Answer 3

In Bootstrap, sembrano aggiungere la regola position: relative ai tag di ancoraggio all'interno della classe .nav. Se si aggiunge questa regola al tag di ancoraggio, dovrebbe fungere da collegamento ipertestuale selezionabile.

Ho appena provato, e sembra funzionare su tutti i browser moderni! Non ho ancora provato questo in qualsiasi browser legacy.