My webpage features a button that displays correctly in Chrome, but the text inside the button gets cut off when viewed in IE (see image). Can you provide guidance on what might be causing this issue and how to resolve it? Bootstrap version 4.0.0 is also being used.
https://i.sstatic.net/rKBQI.png
Code snippet:
.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 tried reproducing the error using the code snippet tool, even after encapsulating my entire webpage and CSS within it, with no success. The issue seems related to the bootstrap columns, as I'm using col-lg-2 with a maximum width of 225px here.
https://i.sstatic.net/eXZqk.png
After implementing the suggested workaround (using a button instead of input), I encountered the above outcome. The button appears slightly smaller in IE, not adhering to the defined max-width. If anyone has faced similar issues and found a solution, I'd appreciate any insights. In the meantime, I'll continue with the workaround.