잘못된 높이

는 그것이 수행하는 방법입니다 ... 오른쪽에 HTML 테이블-TDS와 옆에 캔버스 빨간색 상자 측면에 그리기 스크립트가 필요합니다 http://jsfiddle.net/KaDnQ/1/

HTML :

<table border="1"> 
<tr> 
    <td valign="top"> 
     <table class="t2" border="1"> 
     <tr><td>1</td></tr> 
     <tr><td>2</td></tr> 
     <tr><td>3</td></tr> 
     <tr><td>4</td></tr> 
     <tr><td>5</td></tr> 
     <tr><td>6</td></tr> 
     <tr><td>7</td></tr> 
     <tr><td>8</td></tr> 
     <tr><td>9</td></tr> 
     <tr><td>10</td></tr> 
     <tr><td>11</td></tr> 
     <tr><td>12</td></tr> 
     <tr><td>13</td></tr> 
     <tr><td>14</td></tr> 
     <tr><td>15</td></tr> 
     <tr><td>16</td></tr> 
     <tr><td>10</td></tr> 
     <tr><td>11</td></tr> 
     <tr><td>12</td></tr> 
     <tr><td>13</td></tr> 
     <tr><td>14</td></tr> 
     <tr><td>15</td></tr> 
     <tr><td>16</td></tr> 
     <tr><td>10</td></tr> 
     <tr><td>11</td></tr> 
     <tr><td>12</td></tr> 
     <tr><td>13</td></tr> 
     <tr><td>14</td></tr> 
     <tr><td>15</td></tr> 
     <tr><td>16</td></tr> 
     <tr><td>10</td></tr> 
     <tr><td>11</td></tr> 
     <tr><td>12</td></tr> 
     <tr><td>13</td></tr> 
     <tr><td>14</td></tr> 
     <tr><td>15</td></tr> 
     <tr><td>16</td></tr> 
     <tr><td>10</td></tr> 
     <tr><td>11</td></tr> 
     <tr><td>12</td></tr> 
     <tr><td>13</td></tr> 
     <tr><td>14</td></tr> 
     <tr><td>15</td></tr> 
     <tr><td>16</td></tr> 
     <tr><td>10</td></tr> 
     <tr><td>11</td></tr> 
     <tr><td>12</td></tr> 
     <tr><td>13</td></tr> 
     <tr><td>14</td></tr> 
     <tr><td>15</td></tr> 
     <tr><td>16</td></tr> 
     </table> 
    </td> 
    <td valign="top"><canvas id="x"></canvas></td> 
</tr> 
</table>

CSS :

body { 
    margin: 30px; 
} 

.t2 { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

.t2 td { 
    padding: 5px; 
    text-align: center; 
} 

canvas { 
    border: 1px dashed green; 
}

JS : 0

var canvasWidth = $(".t2").outerWidth()*3; 
var canvasHeight = $(".t2").outerHeight(); 
var c = document.getElementById("x"); 
var c2 = c.getContext("2d"); 

c.width = canvasWidth; 
c.height = canvasHeight; 

$('.t2 td:odd').each(function() { 

    var cur = $(this); 
    var topOffset = 0; 
    var shouldCount = true; 
    var h = $(this).outerHeight(); 

    $('.t2 td').each(function() {  
     if (shouldCount) { 
      topOffset += h; 

      if (cur.is(this)) { 
       topOffset -= h; 
       shouldCount = false; 
      } 
     } 
    }); 

    c2.fillStyle = '#f00'; 
    c2.beginPath(); 
    c2.moveTo(0, topOffset); 
    c2.lineTo(25, topOffset); 
    c2.lineTo(25, topOffset+h); 
    c2.lineTo(0, topOffset+h); 
    c2.closePath(); 
    c2.fill(); 
});

http://jsfiddle.net/KaDnQ/1/

는 그것은 (올바른) 크롬처럼 보이는 방법입니다 correct rendering in Chrome: side by side

문제는 낮은 상자가 에서 파이어 폭스가 "부모"TDS에서 offseted한다는 것이다. lower boxes are offseted

Firefox에서 잘못된 렌더링이 발생하는 이유는 무엇이며 어떻게 수정해야합니까?

업데이트 : 잘못된 렌더링 및 IE 9 (승리)FF 19 (MAC)에 나타납니다!

문제는 "컨테이너의 높이가 항상 내부의 모든 요소의 합과 동일하지 않습니다"고했다 :

출처

2013-03-07 Eugeny Pavlenko

내 파이어 폭스 18.0.2에서 잘 보이는

내 대답은 사람 :)에 대한 시간을 절약 할 희망 ... $ .each 루프를하고, 특히 높이를 합산하여 높이를 얻을 수 있습니다 – Horen

나도 19.0에서 좋아 보인다. – darma

이상한 ...나는 Mac에서 FF를 가지고있다 –

연구에 많은 시간을 소비 & 디버깅, 나는 내 자신의 질문에 대답 할 준비가되어있다. "line-height"속성 때문입니다.

비슷한 문제는 여기에 설명했다 : 여기 Incorrect height calculation when CSS property line-height is set

이 (크롬 & FF 테스트) 약간의 수정 작업 솔루션입니다 : http://jsfiddle.net/BgYpw/3/

아이디어 해결하는 방법 : 합계를 높이/컨테이너 안의 모든 요소의 outerHeight 및 해당 값을 canvas.height에 적용합니다. 단순히 그렇게되는 위의 예에서

: 내측의 제 outerHeight 곱하는 모든 요소

c.height = $('#le div').length * $('#le div:first').outerHeight();

카운트. 안쪽 요소의 높이가 다를 경우 해당 솔루션을 수행 할 수 없습니다. 그것은이 경우, 당신은

출처

2013-03-14 17:55:56

잘못된 높이

답변

관련 문제