按钮仅在中剪切

Question

在我的网页上我有一个按钮。当我用Chrome显示页面时，一切都很好，但是当我在IE中查看它时，按钮文本不适合按钮(见图像)。你有什么提示，什么可能导致这个问题，以及如何解决它？我还使用了引导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 max。

​

​

在我使用了答案中建议的工作(按钮而不是输入)之后，我得到了上面的内容。IE中的按钮有点小，尽管它没有用完我定义的最大宽度。如果有人提出同样的问题，并找到了原因，我会很高兴听到这件事。就目前而言，我会接受工作的。

Answer 1

我已经有了一个问题，就是IE11中的一个按钮会被文本溢出。

对我来说，这是一个连接到字体的呈现错误。

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

我所能找到的唯一解决方案是在加载webfonts时迫使浏览器重新绘制。因此，我使用了一个名为"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> )，这可以解决与输入元素连接的大小调整问题。(也请输入此元素，以查看是否有固定或前置宽度设置)