Firefox의 이상한 테이블 렌더링

Windows 8.1에서는 Firefox 26.0을 사용합니다. 간단한 표 형식의 html + CSS 레이아웃은 다른 줌 레벨에서 이상하게 렌더링됩니다.Firefox의 이상한 테이블 렌더링

Firefox에서 100 % 확대/축소는 괜찮습니다. IE와 Chrome이 문서를 올바르게 렌더링합니다. html 코드를 일반 테이블/tr/td로 변경해도 도움이되지 않습니다.

Firefox의 Windows 8.1 또는 레이아웃에 문제가 있습니까?

HTML 코드

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <div id="board"> 
     <div class="row"> 
      <div class="cell"></div> 
      <div class="cell"></div> 
      <div class="cell"></div> 
      <div class="cell"></div> 
      <div class="cell"></div> 
     </div> 
    </div> 
</body> 
</html>

CSS 코드

#board { 
    display: table; 
    border-collapse: collapse; 
} 

.row { 
    display: table-row; 
} 

.cell { 
    border: 1px solid; 
    display: table-cell; 
    height: 1em; 
    width: 1em; 
}

결과 :

100 % -2 축소 :

,536,913,632 10

100%-2

100 % -3 축소 :

100%-3

100 % 줌 +1에서 :

100%+1

100 %의 줌 +3 :

100%+3

버그질라에서3210

출처

2014-01-11 Vitaliy Shibaev

버그 410959 - [BC] 테이블 셀 테두리 폭은 bug있어 다양한 줌 레벨

에서 잘못 렌더링 아무도 아직 해결하지 않았다. 만약 테이블 데이터를 갖는 경우

또한, (table하지 div

를 사용하며 이에 대한 해결책은 border-collapse: separate;

#board { 
    display: table; 
    border-collapse: separate; 
}

~~Demo~~를 사용하는을 사용하여 줌인 및 줌아웃하는 데 사용하는 버그 수정 데모)

Demo

출처

2014-01-11 09:35:04

신속하고 포괄적 인 답변을 주셔서 감사합니다! –

Firefox의 이상한 테이블 렌더링

답변

관련 문제