When viewing my website in Internet Explorer, I noticed that some elements appear taller compared to other browsers. After investigating further, I discovered that all these elements contained SVG images. It seems like they have a fixed height even though they shouldn't.
Here is an example of how it looks in IE: https://ibb.co/gScRD5
And here is how it appears in Chrome (as expected): https://ibb.co/bPEOt5
(The project uses React with CSS modules, but I've provided a summary of the combined CSS)
The button code snippet:
<a href="/kontakta-oss/" className={styles.cta}>
Kontakta oss
<Svg src={chevronSvg} className={styles.ctaChevron} />
</a>
And here is the corresponding SCSS:
.cta {
margin-top: 1rem;
margin-left: 1rem;
color: #fff;
background: rgba(64, 142, 180, 0.75);
fill: #fff;
transition: background .1s;
padding: 1rem 2rem;
display: inline-block;
}
.cta-chevron {
width: 1rem;
vertical-align: middle;
display: inline-block;
margin-left: 1rem;
}
Any assistance would be greatly appreciated.