Question

尝试在IE11的列上使用flex wrap时遇到一个奇怪的问题。通常的想法是，当将项目符号点添加到一定高度时，项目符号点将进入下一行。除了IE11，这在我检查过的浏览器上似乎对我有用。我的代码如下。要使它正常工作，我需要做一些特定于IE的事情吗？

提前谢谢

.checkbox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 1.6rem;
  list-style: none;
  margin: 20px auto;
  width: 100%;
  max-width: 50%;
  min-width: 200px;
  max-height: 100px;
  padding-left: 0;
  text-align: left;
}

<ul class="checkbox">
  <li>Help to Buy</li>
  <li>Part Exchange</li>
  <li>Home Scheme</li>
  <li>Chain Break</li>
  <li>Early Bird</li>
  <li>Stamp Duty</li>
</ul>

Answer 1

@李斯特斯先生的建议对我有用。现在在IE11上为我添加一个高度以及最大高度。

.checkbox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 1.6rem;
  list-style: none;
  margin: 20px auto;
  width: 100%;
  height: 100px;
  max-width: 50%;
  min-width: 200px;
  max-height: 100px;
  padding-left: 0;
  text-align: left;
}

<ul class="checkbox">
  <li>Help to Buy</li>
  <li>Part Exchange</li>
  <li>Home Scheme</li>
  <li>Chain Break</li>
  <li>Early Bird</li>
  <li>Stamp Duty</li>
</ul>

Flex方向列问题，并在IE11上包装

1 个答案: