Пользовательские флажки Bootstrap отображают ошибку при использовании ширины столбца CSS в IE

Question

Я использую пользовательские флажки Bootstrap (версия 4). Если я выровняю их по ширине столбца в родительском контейнере, флажки в последнем столбце не появятся в IE 11. В Chrome и FF все в порядке.

Текст метки виден, но псевдоэлементыкоторые содержат фактические пользовательские флажки не являются. У вас есть обходной путь для этой ошибки рендеринга?

.container {
  column-width: 100px;
}

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check1"/>
      <label class="custom-control-label" for="check1">test1</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check2"/>
      <label class="custom-control-label" for="check2">test2</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check3"/>
      <label class="custom-control-label" for="check3">test3</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check4"/>
      <label class="custom-control-label" for="check4">test4</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check5"/>
      <label class="custom-control-label" for="check5">test5</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check6"/>
      <label class="custom-control-label" for="check6">test6</label>
    </div>
</div>

Демонстрацию JSBin можно посмотреть здесь: https://jsbin.com/micodetolo/1/edit?html,css,output

Answer 1

Интересная проблема, поскольку Deepak-MSFT упомянула, что это вызвано отображением метки.

Быстрое решение переопределения CSS для целевого IE:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .custom-control .custom-control-label {
       display: ruby;
   }
}

Answer 2

Метка класса css в _reboot.scss имеет отображение: встроенный блок , вызывающий эту проблему.