IE 11 和 Edge 中 flexbox 的列表项对齐问题

Question

我创建了一个有序的问题列表，可以选择编辑或删除每个问题。我正在使用 Bootstrap 4 和 flexboxes 来设计我的网站。该列表在 Firefox 和 Chrome 上看起来很棒，但是当我切换到 IE11 或 Edge 时，有一些奇怪的顶部填充我似乎无法摆脱，除非我停止在列表中使用 flexboxes。

这是我的列表在 Firefox 和 Chrome

中的样子

这是我的列表在 IE11 和 Edge 中的样子

这是一个带有代码的 JSFiddle：https://jsfiddle.net/0g7mpovu

<ol class="mb-0">
  <li class="px-3 py-1">
    <div class="d-flex">
      <div class="d-flex flex-column align-self-center flex-grow-1 w-100">
        How would you describe a surplus in your own words?
      </div>

      <div>
        <div class="dropdown">
          <button type="button" class="btn btn-link" title="Actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-ellipsis-h text-muted"></i>
          </button>

          <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Edit</a>
            <a href="#" class="dropdown-item">Delete</a>
          </div>
        </div>
      </div>
    </div>
  </li>

  <li class="px-3 py-1">
    <div class="d-flex">
      <div class="d-flex flex-column align-self-center flex-grow-1 w-100">
        What is a fiscal budget?
      </div>

      <div>
        <div class="dropdown">
          <button type="button" class="btn btn-link" title="Actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-ellipsis-h text-muted"></i>
          </button>

          <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Edit</a>
            <a href="#" class="dropdown-item">Delete</a>
          </div>
        </div>
      </div>
    </div>
  </li>
</ol>

如何使我的列表在所有浏览器上看起来都一样？如果需要，我愿意将其更改为 table 或其他元素，但我仍想显示数字。

在此先感谢您的帮助！

Answer 1

看起来像一个错误。

这是一个可能的解决方法：

不使用 block-level 弹性容器 (display: flex)，而是使用 inline-level 容器 (display: inline-flex) 添加全宽 (width: 100%) .

将此添加到您的代码中：

.d-flex {
   display: inline-flex;
   width: 100%;
}

revised fiddle

我认为这个错误与下面的 post 有关。但是由于这里的问题仅限于IE11和Edge，而那里的问题涉及到Chrome，所以我没有把这个post当成副本关闭

IE 11 和 Edge 中 flexbox 的列表项对齐问题

List item alignment problem with flexbox in IE 11 and Edge

css

flexbox

internet-explorer-11

microsoft-edge

bootstrap-4