Cách mã hóa các thẻ neo dưới dạng phần tử khối để chứa các phần tử khối khác

Question

Tôi đang gặp sự cố tương tự được mô tả trong số thread này. Tôi tự hỏi nếu có những cách khác để đạt được kết quả tương tự và tránh vấn đề này.

Rõ ràng Firefox có vấn đề với các thẻ neo chứa các phần tử khối ngay cả khi thuộc tính CSS hiển thị của thẻ neo được đặt thành "chặn". Hiệu ứng mà tôi đang cố gắng đạt được là có một khối hoàn toàn có thể nhấp có thể thay vì văn bản trong khối. Nó cũng cho phép áp dụng trạng thái di chuột cho toàn bộ khối thay vì phần liên kết.

bất cứ ai có thể đề xuất một kỹ thuật

EDIT:

Đây là những gì tôi có ý định để hiển thị:

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

Đây là những gì 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> 

Answer 1

Khi tôi thường sẽ cần một <div> bên trong một <a>, tôi sử dụng một <span> thay vì với display:block;. Không phá vỡ bố cục trong Firefox với lỗi nói trên và hoạt động chính xác như là <div>.

Answer 2

Chỉ cần sử dụng một neo với bộ hiển thị để chặn. Nếu bạn đang nói những gì tôi nghĩ rằng bạn đang nói sau đó tôi đã ở trong tình trạng tương tự trong khi trở lại - muốn đặt hình ảnh trong một khối neo, mà không gạch chân dưới hình ảnh. Điều này đã được giải quyết bằng cách áp dụng float: left; vào thẻ img.

Ví dụ:

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

Nếu bạn đặt này trong nhiều thẻ li sau đó bạn có thể nhận được một thực đơn rất đơn giản với các khối có thể click.

Nếu đây không phải là những gì bạn muốn, vui lòng cho ví dụ về nơi bạn muốn một phần tử khối trong khối neo - Tôi không hiểu bạn muốn một thứ như thế ở đâu.

Richard

Answer 3

Trong Bootstrap, chúng dường như thêm quy tắc position: relative vào các thẻ neo bên trong lớp .nav. Nếu bạn thêm quy tắc này vào thẻ neo, nó sẽ hoạt động như một siêu liên kết có thể nhấp.

Tôi vừa thử nó và có vẻ như hoạt động trên tất cả các trình duyệt hiện đại! Tôi chưa thử nghiệm điều này trong bất kỳ trình duyệt cũ nào.