Question

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

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

设置高度没有区别
将边距和填充设置为0没有区别

每个div下面只是一个巨大的白色块 - 没有任何关联它，所以我不明白为什么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 会在这里做得最好。

Answer 2

编辑：

当我看到你正在使用Foundation时，我已经看到基础网格有一些问题，增加负边距值，如边距：0 -0.9375rem;

基本上0.9375是您的网格的主要边距，从SCSS渲染到CSS。为了避免在嵌套列上另外复合边距，Foundation应用负填充来均衡。

如果你遇到嵌套行的问题，请确保每个子.row都包含在“small-xx ... columns”类中，这样可以使边缘恢复正常。

不要这样做：

<div class="row">
  <div class="small-6 columns"></div>
  <div class="row">
    <div class="small-3 columns"></div>
    <div class="small-3 columns"></div>
  </div><!-- .row -->
</div><!-- .row -->

而是这样做：

<div class="row">
  <div class="small-6 columns"></div>
  <div class="small-6 columns">
    <div class="row">
      <div class="small-6 columns"></div>
      <div class="small-6 columns"></div>
    </div><!-- .row -->
  </div><!-- .small-6 .columns -->
</div><!-- .row -->

Internet Explorer 11在div上创建空白空间

2 个答案: