Gecko 기반 브라우저에서 사라지는 CSS 테이블 셀 테두리

Question

게코 버그를 나타내는 매우 구체적인 html 테이블 구조가 있습니다.

다음은 문제의 증발 버전입니다.

<style> 
table.example{ 
    border-collapse:collapse; 
} 
table.example td { 
    border:1px solid red; 
} 
</style> 
<table class="example"> 
    <thead> 
     <tr> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th>   
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td rowspan="3">3</td> 

     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td rowspan="2">2</td>  
     </tr> 
     <tr> 
      <td>1</td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

가에서 "3"이상없는 줄있다 (새 파일에 복사하고이 붙여 넣기 할 것이다) : (예를 들어, FF)는 Gecko 기반 브라우저에서 다음 표를 관찰 오른쪽 하단 셀 - 다른 브라우저에서 볼 수 있으며 줄이 예상대로 나타납니다. 흥미롭게도, 테이블의 THEAD 섹션을 도랑 우리가 무엇을 얻을 볼 :

<style> 
table.example{ 
    border-collapse:collapse; 
} 
table.example td { 
    border:1px solid red; 
} 
</style> 
<table class="example"> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td rowspan="3">3</td> 

     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td rowspan="2">2</td>  
     </tr> 
     <tr> 
      <td>1</td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

를 그 작동하게 지내요. 이걸 본 사람 있니? 테이블에 대한 접근성이 떨어지더라도 필자는 지금 단지 theadad 섹션을 없애 버릴 것이라고 생각합니다.

Answer 1

이상한 ... 분명히 그림 버그. 컨텍스트 메뉴를 마우스 오른쪽 버튼으로 클릭하여 부분 인의 줄을 표시 한 다음 컨텍스트 메뉴를 닫을 때 그 줄이 다시 그려집니다.

편집 : 해결 방법 - 당신은에 style="border-color: ...;"를 넣어 경우 <td rowspan="3">가 나타나는지 국경을 얻을 수 있지만,이 다른 색이어야한다 - 단지 가능한 한 다른 사람에게로 가까이 하나를 사용하십시오. 예를 들어 테이블이 #ff0000 인 경우 # ff0001

Answer 2

이 버그도 발견되었지만 내 PC에는 없지만 다른 버그는 있습니다. 특정 해상도 후에 브라우저 창 크기를 조정하면 선이 사라집니다. 일단 내가 모든 팝업을 창문을 극대화하면. border-collapse : separate를 설정하여 영구적으로 수정할 수 있습니다. 이것은 각 셀의 각 보어에 자신의 너비를 제공합니다. 내가하고 싶은 것이 아니라 작동합니다.

테두리 붕괴 : 붕괴를 사용하여 발생할 수도 있습니다. 테두리를 1 픽셀로 설정 한 다음 0 픽셀로 설정합니다. 테두리가 축소되어 1px 너비보다 0px 우선 순위가 높은 것처럼 보입니다.

어느 쪽이든 그것은 단지 파이어 폭스이고, 또 다른 이유는 그것으로부터 멀어지게됩니다. 편의를 위해