Кнопка вырезана только в Internet Explorer

Question

На моей веб-странице есть кнопка. Когда я отображаю страницу в Chrome, все работает нормально, но когда я смотрю на нее в IE, текст кнопки не помещается в кнопке (см. Изображение). У вас есть подсказка, что может быть причиной этой проблемы и как ее исправить? Я также использую bootstrap v4.0.0.

Вот код:

.button {
  background-color: #002c4c;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  align: center;
  width: 100%;
}

.row {
  margin-right: 0;
}

.row-8 .col-lg-2 {
  max-width: 225px;
}

<div class="row row-8">
  <div class="col-lg-2">
    <form action="/MyProject/print?language=de" method="post" name="printForm" onsubmit="return validateForm()" target="_blank">

      <input type="submit" class="button" name="btn_print" value="PDF generieren">
    </form>
  </div>
</div>

---

Мне не удалось воспроизвести эту ошибку с помощью фрагмента кода, даже когда я поместил всю свою веб-страницу и CSS в нее. Я думаю, это как-то связано с колонками начальной загрузки. Я использую LG-2 с максимальной шириной 225 пикселей.

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

Answer 1

У меня уже была проблема myselfe, что текст переполняет кнопку в IE11.

Для меня это была ошибка рендеринга, связанная со шрифтами.

Похоже, что IE11 отображает кнопку при загрузке страницы, перед загрузкой веб-шрифтов, при загрузке веб-шрифта кнопка не перерисовывается, поэтому она не адаптируется к новой ширине.

Единственное решение, которое мне удалось найти, - заставить браузер перерисовываться при загрузке веб-шрифтов. Поэтому я использовал JS под названием «FontFaceObserver» (https://github.com/bramstein/fontfaceobserver)

JS:

new FontFaceObserver('Roboto', {
    style: 'normal',
    weight: 400,
}).load(function(){
    $('body').addClass('state-font-loaded');
}, 10000);

CSS:

.state-font-loaded {
    visibility: visible; //forcing browser to redraw
}

---

Другой попыткой было бы изменить input на button как <button type="submit" class="button" name="btn_print">PDF generieren</button> это может решить проблемы с размерами, если они подключены к элементу ввода. (Пожалуйста, также проверьте этот элемент, чтобы увидеть, есть ли какая-либо фиксированная или предварительно установленная ширина)