html - Internet Explorer 11 在 div 上创建空白区域

Question

我正在尝试创建网页的打印友好版本，但是，Internet Explorer 11 中的网页和打印预览在 div 下方有一些神秘的空白区域。

我检查了所有的 CSS 类、html 标记等。

• 设置高度没有区别
• 将 margin 和 padding 设置为 0 没有任何区别

它只是每个 div 下方的一个巨大的白色 block - 没有任何关联，所以我不明白为什么 IE 将它放在那里。

例子:

<div class="row"> ## this has the big white space beneath it, after its closing tag
 <div class="medium-12 columns"> ## this is the correct height
  <!-- content -->
 </div>
</div>
## WHITE SPACE HERE ##
## around 20-30 lines long ##
<!-- next div begins here -->

受影响标签的 CSS 规则:

padding: 0 0 5px 0;
page-break-inside: avoid;
margin: 0 -.9375rem;
max-width: none;
width: none;
overflow: hidden;

有人知道为什么会这样吗？

Answer 1

我看到您已尝试将边距归零，但我建议您必须尝试为您的样式表添加一个重置。 <强> CSS resets 删除几乎所有通常会干扰包含各种文档样式的自定义样式表的浏览器预设。

您只需将其作为单独的文件链接添加到您的文档中，或者只需将代码复制并粘贴到您的主 CSS 文件中，放在所有自定义样式之前。

关于 CSS 重置有几个选项，但我认为 Mr. Mayer's reset 会在这里做得最好。