Как кодировать теги привязки как элемент блока, чтобы содержать другие элементы блока

Question

Я испытываю ту же проблему, описанную в этой теме .Мне интересно, есть ли другие способы достичь того же результата и избежать этой проблемы.

Очевидно, что у Firefox есть проблемы с тегами привязки, содержащими элементы блока, даже когда свойство отображения CSS тега привязки установлено на "блок"».Эффект, которого я пытаюсь достичь, заключается в том, чтобы иметь полный клик-блок вместо текста в блоке.Это также позволяет применять состояние наведения ко всему блоку вместо части ссылки.

Может кто-нибудь предложить метод

РЕДАКТИРОВАТЬ:

Это то, что я намерен показать:

<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, вы можете получить очень простое меню с кликабельными блоками.

Если это не то, что вам нужно, приведите, пожалуйста, пример, где вы хотели бы, чтобы блочный элемент был в якоре блока - я не понимаю, где вы хотите такую ​​вещь.

Richard