2012-12-06 44 views
4

所以我一直在處理IE 10中打印表格元素的問題,只有部分邊框會丟失/截斷。奇怪的部分是看起來只是tbody的第一行,並且只有該行的第一個和最後一個單元格受到影響。IE 10在打印表格元素時缺少邊框段

這裏的一些到目前爲止,我已經找到的東西:

  1. 表在屏幕上看起來不錯,但只有當打印將邊界丟失。
  2. 我在標準和怪癖模式下獲得相同的行爲。
  3. 它看起來像是使用border-collapse,單元格和表格元素的邊界以及使用add/tbody的組合。如果我刪除了這些部分中的任何一部分,則邊框將會重新出現,並且所有內容看起來都應該如此

下面是我寫的,顯示了問題的測試頁:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 
    <style type="text/css"> 

     table { 
       border-collapse: collapse; 
       border: 2px solid black; 
     } 

     td { 
       border: 1px solid black; 
     } 

     th { 
       border: 1px solid black; 
     } 

    </style> 
    </head> 
    <body> 
    <table> 
     <thead> 
     <tr> 
      <th>Name</th> 
      <th>Date</th> 
      <th>Type</th> 
      <th>Champion</th> 
      <th>Note</th> 
     </tr> 
     </thead> 
       <tbody> 
     <tr> 
     <td>UI Team Meeting</td> 
     <td>3/5/2013 1:00 PM</td> 
     <td>User Interface</td> 
     <td>John Doe</td> 
     <td></td> 
     </tr> 
     <tr> 
     <td>PM Meeting</td> 
     <td>3/4/2013 10:00 AM</td> 
     <td>PMs</td> 
     <td>Jane Doe</td> 
     <td></td> 
     </tr> 
       </tbody> 
    </table> 
    </body> 
</html> 

所以有其他人看到過這一問題,並找到了解決辦法?我甚至無法找到其他人在討論這個問題。

謝謝!

回答

8

我在IE 9中遇到過類似問題。頁面上第一張表的第一行邊框的上半部分不會出現在頁面的紙張版本上。當我加載你的代碼時,我看到相同的症狀。

我通過將table,thtd的邊界規則合併爲一條規則來解決我們的問題。訣竅似乎對你的工作爲好,但它意味着外邊框是尺寸與內部邊界相同:

table { 
      border-collapse: collapse; 
    } 

    table, th, td { 
      border: 1px solid black; 
    } 
+1

感謝克里斯,我們想出了一個類似的解決方案,但它似乎只要工作您使用1px作爲邊框寬度。更大的東西仍然表現出同樣的問題。但是我們可能會只使用1px邊框。在光明的一面,MS已經承認了這個錯誤並「正在研究它」。 https://connect.microsoft.com/IE/feedback/details/771188/tables-printing-problem-in-ie10 –

+0

在Chromium瀏覽器中出現同樣的問題。奇蹟般有效! :) – Stu