Internet Explorer 11で空白の空白を作成する

Question

印刷用のWebページを作成しようとしていますが、Internet Explorer 11のWebページと印刷プレビューには、divの下に不思議な空白があります。私は高さを設定

• など、すべてのCSSクラス、HTMLマークアップをチェックして

  は0にマージンとパディングを設定するに違い

• を行うものではありませんそれはちょうどであるに違い

を行うものではありません各部門の下にある巨大な白いブロック - それに関連するものは何もないので、なぜ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

編集：

私はあなたが財団を使用していることを見ての通り、私はその土台グリッドは、そのマージンのような負のマージン値の追加問題のいくつかの種類持って見てきた：0 -0.9375remを。

基本的には、SCSSからCSSにレンダリングされるグリッドの主なマージンは0.9375です。ネストされた列に余白を追加することを避けるため、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 -->