Button is cut only in Internet Explorer - css

Question

In my web page I have a button. When I display the page in Chrome, everything works fine, but when I look at it in IE, the button text doesn't fit in the button (see image). Do you have a hint, what possibly causes this problem and how to fix it? I'm also using bootstrap v4.0.0.
Here is the code:
.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>
I was not able to reproduce this error with the code snippet thing even when I put my whole web page & css inside it. I guess it has something to do with the bootstrap columns. I use lg-2 here with a max width of 225px.
After I used the work-around (button instead of input) suggested in the answer I get the above. The button in IE is a bit smaller though it doesn't use up the max-width I defined. If anyone issues the same problem and has found a reason for that, I'd be glad to hear about it. For now, I'll live with the work-around.

Answer 1

I'll already had the issue myselfe that a text overflows a button in IE11.
For me it was a rendering bug connected to fonts.
IE11 seems to render the button on pageload, before webfonts are loaded, when the webfont is loaded the button is not redrawed so it does not adapt to the new width.
The only solution I was able to find is forcing the browser to redraw when webfonts are loaded. Therfore I used an JS called "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
}
An other try would be to change the input into button like
<button type="submit" class="button" name="btn_print">PDF generieren</button> this could solve sizing issues if they are connected to the input element. (Please also inpect this element to see if there is any fixed or precentage width set)