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

使用答案中建议的解决方法（按钮而不是输入）后，我得到了上述结果。 IE 中的按钮有点小，虽然它没有用完我定义的最大宽度。如果有人遇到同样的问题并找到了原因，我会很高兴听到这个消息。现在，我将接受解决方法。

Answer 1

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

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

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

我能找到的唯一解决方案是在加载 webfonts 时强制浏览器重绘。因此我使用了一个名为“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> 如果它们连接到输入元素，这可以解决大小问题。 （也请检查这个元素，看看是否有任何固定或百分比宽度设置）