不同於Firefox中實際顯示高度的表格行高度值

我在這裏圍繞我用來顯示消息的表格中行的高度有一個有趣的問題。要求規定，如果有超過7條消息，則包含該表的整個div應調整到7條消息的高度，並打開滾動條以啓用其餘的查看。不同於Firefox中實際顯示高度的表格行高度值

在JS代碼（JQuery）中，一旦頁面準備就緒，它首先將「偶」類應用於表中的每個偶數行。

var $table = $('#messageTable'); 
$('tr:even', $table).addClass('even');

樣式

.even {background: none repeat scroll 0 0 #F8F8F8;}

即處理和施加的類是奇數和偶數行之間的唯一區別。

完成後，它會檢查表格中的行數，如果超過7個，則會捕獲前7箇中每個單獨行的高度，將它們相加，設置父級的高度div到該值，並將scrolling類添加到該div。

var $allRows = $('#messageTable tr'); 

var $totalRowsHeight = 0; 

if ($allRows.length > 7) { 
    for (var i = 0; i < 7; i++) { 
     $totalRowsHeight += $('#messageTable tr:eq(' + i + ')').outerHeight(); 
    } 

    $('#messageTable ').closest('.msgSection').css({'height': $totalRowsHeight +'px'}).addClass('scrolling'); 
}

風格

.scrolling {overflow: auto;}

而且這裏畢竟是生成的HTML結構已運行：

<div class="msgSection scrolling" style="height: 266px"> 
    <table summary="This table shows your messages" id="messageTable"> 
     <tbody> 
      <tr> 
       <td class="messageDateWidth">03/14/2013</td> 
       <td class="messageWidth"> 
        <a name="message_01" href="TARGET_URL_HERE">D000</a> 
       </td> 
      </tr> 
      <tr class="even"> 
       <td class="messageDateWidth">03/13/2013</td> 
       <td class="messageWidth"> 
        <a name="message_02" href="TARGET_URL_HERE">C000</a> 
       </td> 
      </tr> 
      <tr> 
       <td class="messageDateWidth">03/12/2013</td> 
       <td class="messageWidth"> 
        <a name="message_03" href="TARGET_URL_HERE">B000</a> 
       </td> 
      </tr> 
      <tr class="even"> 
       <td class="messageDateWidth">03/12/2013</td> 
       <td class="messageWidth"> 
        <a name="message_04" href="TARGET_URL_HERE">A000</a> 
       </td> 
      </tr> 

      . . . 

     </tbody> 
    </table> 
</div>

所以，所有的工作正常。。。 JS和CSS做他們應該做的事情。除Firefox外（適用於IE，Chrome和Safari）。

在Firefox中，.outerHeight()函數爲每行返回值「38」。 .height()和.outerHeight(true)也返回「38」。當您檢查Firebug中的<tr>標籤時，它表示它們是38像素高。當您將倍數7倍時，您會得到「266」（請參閱上面的HTML中的style="height: 266px"）。

問題是，<div>是4個像素太長。

經過一番調查，我發現Firefox渲染了所有奇數行，儘管所有事情都報告它們是38。由於前7行中有4個奇數行，因此高度計算比實際行集高4個像素。

我試着將奇數行設置爲「偶數」樣式（通過Firebug手動設置，並通過控制檯編程，當樣式適用時，高度保持相同的37像素（並且仍然報告爲38 ）。

我正式難住了。

來源

2013-03-14 talemyn

你有應用？如果是的話，它會「輸」行之間的像素，如果你有一個應用邊界1px的邊界崩潰屬性。它不在表格單元的內部高度處考慮，這可能是高度變化的原因。再加上Firefox有能力的亞像素渲染的潛力，它很可能會試圖顯示47.44的高度......並且它是以48/47交替出現的。請參閱：Sub-Pixel Problems...

如果您的表格單元格沒有邊框，那麼對於您來說，這確實不是一個答案。抱歉。

來源

2013-03-14 19:07:14 artcase

這很好，可能有關係。每行都有一個1像素的底部邊框，全局表格樣式設置爲'border-collapse：collapse; border-spacing：0;'。不知道爲什麼它只會影響奇數行。在Firebug中更新它似乎沒有影響它，但我會嘗試使用該特定表的樣式更新代碼，並查看它是否修復了它在頁面渲染上的問題（開發環境...可以更改代碼並點擊'reload':(）。 – talemyn 2013-03-14 19:29:08

好吧，我想出了一種方法來在本地進行測試，並重置表使用'border-collapse：separate;'併爲表提供'cellspacing =「0」'的屬性似乎有穩定了所有瀏覽器的渲染高度當然，現在我正在獲得它們之間的高度計算差異，但至少渲染是一致的，非常感謝:) – talemyn 2013-03-14 19:52:37

拍攝。。。有人用特定於Firefox的高度計算來改變JS（試圖解決同樣的問題），但沒有告訴我。一旦我刪除了這個新方法，沒有任何初始影響。接下來我將研究「子像素」問題。謝謝。。。 – talemyn 2013-03-14 19:59:34

不同於Firefox中實際顯示高度的表格行高度值

回答

相關問題