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

时间:2018-06-01 08:18:13

标签: css twitter-bootstrap flexbox bootstrap-4 microsoft-edge

按钮中的文字应位于中心位置,但使用网络浏览器显示在顶部,有什么不对?



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>
&#13;
&#13;
&#13;

我使用代码:

添加了带有Boostrap 4 alpha的codepen

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

适用于Mozilla Firefox和Chrome,Microsoft Edge或Internet Explorer没有达到预期的效果。

3 个答案:

答案 0 :(得分:1)

你正在使用flex,而flex只对IE11二重奏提供部分支持,以防止出现大量错误。

Compatibility table

例如,使用content确定弹性项目的大小时,IE 10-11始终采用flex-basis框模型,即使该项设置为box-sizing: border-box

其他已知错误:

-IE 11要求将一个单位添加到第三个参数,flex-basis属性(more info

- 在IE10和IE11中,display: flexflex-direction: column的容器无法正确计算其弯曲的儿童&#39;如果容器具有min-height但没有明确的height属性,则为size。

-IE 11在使用min-height时未正确对齐项目

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

答案 1 :(得分:1)

您只需要将align-items-center类添加到button元素,这会将子元素垂直对齐。

  

注意:在Edge,IE11,IE10浏览器上测试它可以正常使用此修复程序

检查演示here

HTML

<div class="container">
  <button class="w-100 f-default-f btn btn-primary d-flex align-items-center justify-content-between px-3">
    <div>Text</div>
    <div>icon</div>
  </button>
</div>

答案 2 :(得分:0)

您的某个CSS文件中是否有lineheight属性?

尝试添加此值或对其进行处理,它会将您的文本与IE按钮对齐(当然也适用于Edge)。