Firefox 不在打印视图中呈现列

Question

我有一个div，里面有两个divs，每个都有一个ul 的内容，所以它看起来像视图中的两列。我正在使用window.print 和 css 将这些打印出来，Chrome 和 Safari 工作正常，但 Firefox 正在将 2 列变成 1。

  <div class="Sides">
    <div class="left side">
      <ul>
        <li class="List">
          <div>
            <div>
              <div class="circle">
                1
              </div>
              <select>
                <option disabled="disabled">
                  Select 
                </option>
                <option selected="selected" value="1">
                  1
                </option>
              </select> <label>Label</label>
            </div>

            <div class="form">
              <div class="A">
                <span >A</span><span></span>
              </div>
              <select >
                <option selected="selected" value="A" >
                  A
                </option>

                <option value="B" >
                  B
                </option>

                <option value="C">
                  C
                </option>
              </select><label>Select</label>
            </div>
          </div>
        </li>
        <li class="List">
          <div>
            <div>
              <div class="circle">
                1
              </div>
              <select>
                <option disabled="disabled">
                  Select 
                </option>
                <option selected="selected" value="1">
                  1
                </option>
              </select> <label>Label</label>
            </div>

            <div class="form">
              <div class="A">
                <span >A</span><span></span>
              </div>
              <select >
                <option selected="selected" value="A" >
                  A
                </option>

                <option value="B" >
                  B
                </option>

                <option value="C">
                  C
                </option>
              </select><label>Select</label>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>


 

它在 Chrome/Safari 上：

它在 Firefox 上：

我试过column-count、column-fill、float（左/右用于差异 div）、min-width: 0/min-height: 0，但我似乎无法让 2 列出现。

关于如何让它发挥作用，任何人有任何其他建议吗？

Answer 1

因此，如果有人再次遇到此问题，我必须将 @media print 设置为 min-width: 0px; 以便让列按应有的方式打印出来。然后，为了让它们达到我需要的宽度，我必须设置一个 width: 500px;（或任何你需要的宽度）来让它们像我需要的那样打印出来。好奇怪的bug，现在已经修复了！