Firefox 버그 : 블록 요소 외부의 링크

Question

이전에 파이어 폭스가 블록 요소를 감싸는 링크에 큰 문제가 있다고 들었습니다. 최근에 몇 가지 문제가있었습니다.

그것은 때때로 (어쩌면 20 % 속도), 어떤 이유로,이 코드를 변경 (모든 요소 내 스타일 블록 요소로 정의되어 있습니다)입니다 :이 속으로

<li> 
    <a href="product.htm"> 
    <img src="product-image.jpg" width="100" height="100" alt="Product image" /> 
    <h2>Product title</h2> 
    <p>Product description</p> 
    </a> 
</li> 

:

<li> 
    <a href="product.htm"> 
    <img width="100" height="100" alt="Product image" src="product-image.jpg"> 
    </a> 
    <h2> 
    <a _moz-rs-heading="" href="product.htm">Product title</a> 
    </h2> 
    <p></p> 
    <p> 
    <a href="product.htm">Product description</a> 
    </p> 
</li> 

이는 스타일 시트가 완전히 잘못된 방식으로 요소를 표시하도록합니다. 요소를 사용하여 webshop 제품 목록에 제품 이미지, 제목 및 설명이 포함 된 큰 링크를 가져옵니다.

큰 링크가 필요하고이를 수행 할 대체 방법을 찾을 수 없습니다. 너는 무엇을 제안 하겠는가?

Answer 1

나는 자원 xhtml.com가 얼마나 권위 모르겠지만, 그들이 a 태그 만 포함 할 수 있다고 않습니다

• 인라인 요소를하는 제외하고, 깊이
• 텍스트
에서

가능한 해결책은 HTML을 재구성하여 이해하는 것입니다 (예 : 블록 레벨 elem 인라인 수준 요소의 ents). 제품 (h2 또는 이미지 주변)에 대한 단일 링크 만 있으면됩니다. 그런 다음 자바 스크립트를 사용하여 li의 클릭을 감지하고 링크를로드하십시오.

의미가 있습니까? Here's an example.

Answer 2

모두이 목록 항목의 인스턴스는 일관되게 코드화되어 있습니까? (읽기 : 전체를 유효성 검사기를 통해 실행하십시오.) 20 % 정도만 발생한다고 말했 으면, 먼저 깨지기 쉬운 점에 대해서는 다른 점이 없어야합니다. 이것은 브라우저의 일부로 과장된 수정 일 것 같습니다. _moz-rs-heading을 검색하면 여러 게시물이 나타납니다. like this one. 그러나 참조 된 버그는 수정되었습니다. 그러나 일부 경우에 사람들은 실제로 실제 <a> 태그가 깨 졌음을 발견했으며, 태그를 보지 않고 Firefox 수정 사항을 처리하려고했습니다. 다소 우아하게.

Answer 3

같은 문제가있었습니다. 동일한 HTML이 다양한 방식으로 표시됩니다. 말 그대로 페이지를 새로 고칠 때마다 Firefox는 내 <a>..</a>을 여러 가지 작은 <a>..</a><a>..</a> 블록으로 여러 번 파기했습니다. (거의) 잘못 표시됩니다.

This page 그것이 <a> 아래에 직접 <div> 퍼팅 제안 있지만, 사실은 작동하지 않았다 내 웹 디자이너가 제공 한 페이지가, 이미 있었다 좋은 자원이다.

그래서 내가 한 것은 <div>을 <span style="display:block">으로 바꿔서 이제 작동하는 것입니다.

<a ...> 
    <span style="display:block"> 
     ... 
    </span> 
</a>