时间戳

首页 > 解决方案 > IE / ME - 使用 Boostrap 4 将中间按钮文本与 flex 垂直对齐

css - IE / ME - 使用 Boostrap 4 将中间按钮文本与 flex 垂直对齐

问题描述

按钮中的文字应该在中心，但使用Internet Explorer显示在顶部，这是怎么回事？

button {
  height: 100px;
}
<div class="container">
  <button class="w-100 f-default-f btn btn-primary d-flex justify-content-between px-3">
    <div>Text</div>
    <div>icon</div>
  </button>
</div>

我添加了一个带有 Boostrap 4 alpha 的代码笔，代码如下：

https://codepen.io/anon/pen/PaqLNm

它适用于 Mozilla Firefox 和 Chrome，而 Microsoft Edge 或 Internet Explorer 则没有所需的行为。

标签： csstwitter-bootstrapflexboxbootstrap-4microsoft-edge

解决方案

您正在使用 flex，并且由于存在大量错误，因此 flex 在 IE11 上只有部分支持。

兼容性表

例如，IE 10-11在用于确定弹性项目的大小content时总是假定一个盒子模型flex-basis，即使该项目设置为box-sizing: border-box.

其他已知错误：

-IE 11 需要将一个单位添加到第三个参数，即flex-basis属性（更多信息）

- 在 IE10 和 IE11 中，如果容器具有但没有显式属性display: flex，flex-direction: column则容器将不会正确计算其伸缩子项的大小。min-heightheight

min-height-IE 11使用时不能正确垂直对齐项目

来源： https ://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box https://developer.mozilla.org/en-US/docs/Web/CSS /flex 基础 https://caniuse.com/#search=flex

推荐阅读