高度在Firefox（帆布圖紙）錯誤

我需要一個腳本用HTML表TDS的是右側的紅色帆布箱側拉...高度在Firefox（帆布圖紙）錯誤

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：

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/

這是怎麼看起來像在Chrome（正確）： correct rendering in Chrome: side by side

的問題是，下框在火狐從它們的「父母」 TDS offseted。 lower boxes are offseted

什麼原因在Firefox中顯示錯誤以及如何解決？

更新：錯誤渲染出現在FF 19（MAC）和IE 9（WIN）！

來源

2013-03-07 Eugeny Pavlenko

在我的Firefox 18.0.2看起來不錯 – Horen 2013-03-07 23:21:23

我也是，在19.0上看起來不錯。 – darma 2013-03-07 23:22:08

怪異...我在Mac上有FF – 2013-03-08 09:38:21

花很多時間在研究&調試，我願意回答我的問題：

的問題是，「容器高度並不總是等於內的所有元素的總和」。發現，那是因爲「行高」屬性。在這裏描述

類似的問題： Incorrect height calculation when CSS property line-height is set

這（鉻& FF測試）一點點修改，工作液： http://jsfiddle.net/BgYpw/3/

的想法如何解決：總結的高度/容器內所有元素的outerHeight，並將該值應用於canvas.height。

在上面的例子是做簡單地這樣：

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

所有元素內被乘以第一的outerHeight的計數。如果內部元素的高度可能不同，則該解決方案不會執行。它的話，你可以通過做$。每個循環，特別是高度相加得到的高度...

希望我的回答將節省小時有人:)

來源

2013-03-14 17:55:56

高度在Firefox（帆布圖紙）錯誤

回答

相關問題