打印时如何修复 IE 表格、单选和复选框怪癖？答案

【问题标题】：How to fix IE table, radio, and checkbox quirks when printing?打印时如何修复 IE 表格、单选和复选框怪癖？
【发布时间】：2013-04-04 20:55:00
【问题描述】：

我需要在 IE8、IE9 和 Chrome 中打印页面。它在 Chrome 中完美打印，在 IE8 中效果不佳（尚未测试 IE9）。

我现在在使用 IE 时遇到的 3 个主要问题是：

请参阅下面的屏幕截图。为什么会这样？我似乎无法修复它，我已尝试多次更改 css。我知道它正在读取 CSS。

复选框：

到处都有额外的填充：

没有内部表格边框：

更新：

表单在 Chrome 和 IE 中都能正确显示（显示表格边框、填充正确等）。它可以在 Chrome 中正确打印。它在 IE 中无法正确打印。

请不要告诉我以其他方式打印表格。我做出了从浏览器打印它的设计决定：这对我的项目来说是最好的。

【问题讨论】：

【解决方案1】：

1：你可能有类似的东西

input {border: ...; width: ...}

这会影响您的复选框和收音机。至少在 Internet Explorer 中。您可以使用

来解决此问题

input[type=radio], input[type=checkbox] {alternating styles}

或通过分配特定的类：

input.radio, input.checkbox {alternating styles}

2：你可以通过同时给出输入表单和旁边的标签来消除填充

text-align: vertical

3：要解决边框问题，您应该为此提供 CSS ;)

【讨论】：

我已经为收音机和复选框设置了不同的样式。我尝试将宽度设置为 13px（它在表单上的大小），并将边框设置为无。也许我不清楚填充，标签和输入之间应该有更少的空间。这对我来说不是对齐问题。
mmh，是的，好吧，你应该做一个 jsFiddle :) 有东西可以现场观看。

【解决方案2】：

我在页面中添加了一个带边框的简单表格，以测试 IE 是否不显示表格边框，或者我的 css 是否被覆盖。当它起作用时，我意识到我的表被它的 ID 选择在其他地方（并删除了它的边框）。当我尝试添加用于打印的边框时，我选择的是表的类名而不是 ID。

我还意识到 jquery.jqprint 插件没有在它正在打印的 iframe 中包含文档类型。现在，它在 IE8 中完美打印。

【讨论】：