break-inside：縁のパディングを使用しないでください。

Question

パディングを含むブロック要素で列レイアウトを正しく動作させるには問題があります。私が直面している問題は、最初の列の白い背景の細い線が2番目の列の先頭に壊れることです。 IE11とMS-Edgeで発生します。 ChromeとFirefoxは意図したとおりに列を表示します。

.outer { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    -webkit-column-gap: 1.6em; 
 
    -moz-column-gap: 1.6em; 
 
    column-gap: 1.6em; 
 
    background-color: grey; 
 
} 
 
.container { 
 
    break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    -webkit-column-break-inside: avoid; 
 
    padding: 0.75em; 
 
    background-color: white; 
 
} 
 

 
.container + .container { 
 
    
 
    margin-top: 0.5em; 
 
}

<div class="outer" style="margin: 40px auto; width: 500px; border: 1px solid red"> 
 
    <div class="container"> 
 
     This is a rather long text to break into separate lines but - sometimes - not to stay in one. With some additional text for a longer column 
 
    </div>  
 
    <div class="container"> 
 
     Next column 
 
    </div> 
 
    <div class="container"> 
 
     Another column 
 
    </div> 
 
</div>

は、どのように私はIE11とMS-エッジで動作するようにbreak-inside: avoidを得るのですか？ 余分なDIVにテキストを折り返してパディングを削除しようとしましたが、最初の列自体のテキストが壊れてしまいました。

ヒントはありますか？前もって感謝します！

UPDATE

問題がdiscribedよりも悪いようです。 break-inside: avoidちょうどエッジで動作していません。ここで私は（も内部テーブルを壊す）列の要素にブロック要素を置く：

.column { 
 
    column-count: 2; 
 
    column-gap: 1em; 
 
} 
 

 
.elem { 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
} 
 

 
.elem + .elem { 
 
    margin-top: 0.5em; 
 
} 
 

 
.elem { 
 
    background-color: orange; 
 
} 
 

 
.elem + .elem { 
 
    background-color: lightblue; 
 
} 
 

 
.elem + .elem + .elem { 
 
    background-color: lightgreen; 
 
}

<div class="column"> 
 
    <div class="elem"> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
    <div>five</div> 
 
    <div>six</div> 
 
    </div> 
 
    <div class="elem"> 
 
    <div>one</div> 
 
    </div> 
 
    <div class="elem"> 
 
    <div>one</div> 
 
    </div> 
 
</div>

をMS documentation for Edgeは、それがサポートされていると述べ、まだそれが機能していません。 Can I useでもサポートされており、既知の問題はリストされていません。

はこれにいくつかの解決策がなければならない...

Answer 1

[OK]を、私は最終的に解決策を見つけた：私はIE10、IE11とMSエッジ（ここで見つけるために実行されるCSSにスイッチを構築してきましたBrowser Strangeness）。

このスイッチの内部では、に要素をwidth: 100%に設定しました。そうすることで、Chrome、Firefox、そしてEdgeでも動作します。

.column { 
 
    column-count: 2; 
 
    column-gap: 1em; 
 
} 
 

 
.elem { 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
} 
 

 
.elem + .elem { 
 
    margin-top: 0.5em; 
 
} 
 

 
.elem { 
 
    background-color: orange; 
 
} 
 

 
.elem + .elem { 
 
    background-color: lightblue; 
 
} 
 

 
.elem + .elem + .elem { 
 
    background-color: lightgreen; 
 
} 
 

 
/* columns fix for IE10, IE11 and MS Edge*/ 
 
_:-ms-lang(x), .column { 
 

 
\t margin-top: -0.5em; 
 
} 
 
_:-ms-lang(x), .elem { 
 

 
\t display: inline-block; 
 
\t width: 100%; 
 
\t margin-top: 0.5em; 
 
}

<div class="column"> 
 
    <div class="elem"> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
    <div>five</div> 
 
    <div>six</div> 
 
    </div> 
 
    <div class="elem"> 
 
    <div>one</div> 
 
    </div> 
 
    <div class="elem"> 
 
    <div>one</div> 
 
    </div> 
 
</div>