css - 按钮仅在 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 放入其中，我也无法通过代码片段重现此错误。我想这与 Bootstrap 列有关。我在这里使用 lg-2，最大宽度为 225px。

在我使用答案中建议的解决方法(按钮而不是输入)后，我得到了上面的结果。 IE 中的按钮有点小，但它没有用完我定义的最大宽度。如果有人遇到同样的问题并找到了原因，我很乐意听到。现在，我会接受变通办法。

Answer 1

我自己已经遇到了在 IE11 中文本溢出按钮的问题。

对我来说，这是一个与字体相关的渲染错误。

IE11 似乎在页面加载时呈现按钮，在加载网络字体之前，当加载网络字体时按钮没有重绘，因此它不适应新的宽度。

我能找到的唯一解决方案是在加载网络字体时强制浏览器重绘。因此我使用了一个名为“FontFaceObserver”的 JS (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>如果它们连接到输入元素，这可以解决尺寸问题。 (请同时检查此元素以查看是否设置了固定或百分比宽度)