IE / ME - Вертикальное выравнивание текста средней кнопки с помощью flex, используя Boostrap 4 - PullRequest
Новая
       25

IE / ME - Вертикальное выравнивание текста средней кнопки с помощью flex, используя Boostrap 4

0 голосов
/ 01 июня 2018

Текст в кнопке должен быть в центре, но он отображается вверху с помощью 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

Хорошо работает с MozillaFirefox и Chrome с Microsoft Edge или Internet Explorer не имеют желаемого поведения.

Ответы [ 3 ]

0 голосов
/ 04 июня 2018

Вы используете flex, и flex имеют только частичную поддержку в IE11 duo для большого количества ошибок.

Compatibility table

Например, IE 10-11 всегда принимает content блочную модель при использовании flex-basis для определения размера гибкого элемента, даже если этот элемент установлен на box-sizing: border-box.

Другая известная ошибка:

-IE 11 требует, чтобы к третьему аргументу была добавлена ​​единица, свойство flex-basis ( больше информации )

-В IE10 и IE11 контейнеры с display: flex и flex-direction: column не будут правильно рассчитывать размеры своих согнутых дочерних элементов, если контейнер имеет min-height, но не имеет явного свойства height.

-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

0 голосов
/ 05 июня 2018

Вам просто нужно добавить класс align-items-center к button элементу, который будет выравнивать дочерние элементы по центру по вертикали.

Примечание: протестировано в браузере Edge, IE11, IE10.исправить

Проверить демо здесь

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>
0 голосов
/ 01 июня 2018

Есть ли у вас свойство lineheight в одном из ваших файлов CSS?

Попробуйте добавить это значение или пометить его, оно выровняет ваш текст в кнопке для IE (и, конечно, для Edge тоже).

...