打印时带有行跨度的 IE10 边框问题

【问题标题】：IE10 Border Issue w/ Rowspan while printing打印时带有行跨度的 IE10 边框问题
【发布时间】：2013-08-21 18:09:36
【问题描述】：

谁能解释一下为什么从 IE10 打印时，以下 HTML 表格中的边框不会显示在打印输出上？

即使你没有答案，有其他人注意到这种行为吗？

我一直在打印到 Microsoft XPS 查看器，但打印到打印机时它也不显示。

这是一个类似的 IE10 打印问题，但这不是我遇到的问题： IE 10 Missing border segments while printing table elements

<!DOCTYPE html>
<html>
<head>
    <title>Broken IE10 Print Page</title>
    <style>
    table {
        border: 3px solid black;
        font-size: 8pt;
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
    }

    th {
        padding: 2px;
        border: 1px solid black;
    }

    td {
        padding: 2px;
        border: 1px solid black;
    }
    </style>
</head>
<body>
    <table style="width: 975px;">
        <thead>
            <tr>        
                <th>Test1</th>
                <th>Test2</th>
                <th>Test3</th>
                <th>Test4</th>
                <th>Test5</th>
                <th>Test6</th>
                <th>Test7</th>      
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td rowspan="2">
                    Broken in Print
                </td>
                <td>Material</td>
                <td>Material</td>
                <td>0.10000</td>
                <td></td>
                <td></td>            
                <td>Rowspan 2</td>
            </tr>
            <tr>
                <td>Material</td>
                <td>Supplies</td>
                <td>0.20000</td>
                <td>0.1</td>
                <td></td>            
                <td>Manual</td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

【问题讨论】：

  • 祝你好运。我自己开发打印样式表的经验是，打印行为的文档记录非常差。
  • Internet Explorer 团队在 Microsoft Connect 上做出了回应。他们能够重现我的问题并正在对其进行调查。 connect.microsoft.com/IE/feedback/details/797783/…
  • 不要使用'px'作为边框使用'pt'或'em'
  • 微软回应称他们已在最新版本的 Internet Explorer (IE11) 中修复了该问题。我猜IE10没有希望了。

标签： html printing border internet-explorer-10 html-table


【解决方案1】：

尝试转到 IE > 工具 [alt+x] > 打印 > 页面设置。在左上角，您应该会看到 Paper Options。在它下面，有一个标题为打印背景颜色和图像的复选框。启用后尝试打印。

【讨论】：

    【解决方案2】：

    尽管微软做出了回应，但我仍然在 IE 11 中看到这个问题 我的文件超过一页。但我发现了一个 hacky 解决方法。

    去掉行跨度，任何应该有行跨度的单元格都可以 现在将其内容与position: absolute; 放在一个范围内。然后就是 只需使用 css 删除不应该存在的内容。如果你 也可以使用table { border-collapse: collapse; }，你甚至不能 见休息。这是一个完整的例子：

    <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>IE11 Table</title>
  <style type="text/css">
  td {
    border: 1px solid black;
    padding: 3ex;
  }
  td.rowspan {
    border-bottom: 0 solid transparent;
  }
  td.rowspan span {
    position: absolute;
    margin-top: -1.5ex;
  }
  td.rowspanned {
    border-top: 0 solid transparent;
    color: transparent;
    background-color: transparent;
  }
  </style>
 </head>
 <body>
  <table>
   <tbody>
    <tr><td>A1</td><td>A2</td></tr>
    <tr><td>B1</td><td>B2</td></tr>
    <tr><td>C1</td><td>C2</td></tr>
    <tr><td>D1</td><td>D2</td></tr>
    <tr><td>E1</td><td>E2</td></tr>
    <tr><td class="rowspan"><span>F1<br>F1A<br>F1B<br>F1C<br>F1D</span></td><td>F2</td></tr>
    <tr><td class="rowspanned">G1</td><td>G2</td></tr>
    <tr><td>H1</td><td>H2</td></tr>
    <tr><td>I1</td><td>I2</td></tr>
    <tr><td>J1</td><td>J2</td></tr>
    <tr><td>K1</td><td>K2</td></tr>
    <tr><td>L1</td><td>L2</td></tr>
    <tr><td>M1</td><td>M2</td></tr>
    <tr><td>N1</td><td>N2</td></tr>
    <tr><td>O1</td><td>O2</td></tr>
    <tr><td>P1</td><td>P2</td></tr>
    <tr><td>Q1</td><td>Q2</td></tr>
   </tbody>
  </table>
 </body>
</html>


    td {
  border: 1px solid black;
  padding: 3ex;
}
td.rowspan {
  border-bottom: 0 solid transparent;
}
td.rowspan span {
  position: absolute;
  margin-top: -1.5ex;
}
td.rowspanned {
  border-top: 0 solid transparent;
  color: transparent;
  background-color: transparent;
}
    <table>
 <tbody>
  <tr><td>A1</td><td>A2</td></tr>
  <tr><td>B1</td><td>B2</td></tr>
  <tr><td>C1</td><td>C2</td></tr>
  <tr><td>D1</td><td>D2</td></tr>
  <tr><td>E1</td><td>E2</td></tr>
  <tr><td class="rowspan"><span>F1<br>F1A<br>F1B<br>F1C<br>F1D</span></td><td>F2</td></tr>
  <tr><td class="rowspanned">G1</td><td>G2</td></tr>
  <tr><td>H1</td><td>H2</td></tr>
  <tr><td>I1</td><td>I2</td></tr>
  <tr><td>J1</td><td>J2</td></tr>
  <tr><td>K1</td><td>K2</td></tr>
  <tr><td>L1</td><td>L2</td></tr>
  <tr><td>M1</td><td>M2</td></tr>
  <tr><td>N1</td><td>N2</td></tr>
  <tr><td>O1</td><td>O2</td></tr>
  <tr><td>P1</td><td>P2</td></tr>
  <tr><td>Q1</td><td>Q2</td></tr>
 </tbody>
</table>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-03-08
      • 2014-04-17
      • 2018-01-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode