Font size displayed different in IE 11 than other browsers
I have a site that I'm working on where I have text that needs to be viewed next to the same size in all browsers. I am using 1.6em as the font size in the photos below. The problem is that the font looks much larger in IE 11 than it does in Chrome / FF / Safari. I've tried every font size option I can think of, for example; px, vh, vw, vmin,%, but they all render more in IE 11 than all other browsers. Does anyone know a good job for this?
Not sure if this matters, but I am using google font instead of regular font.
Sample in Chrome (this is how it should look)
Sample in IE 11
My HTML:
<div class="banner-wrap">
<div>
<h1>Where Compassion Lives</h1>
</div>
<img class="banner" src="assets/images/banner_title_home.png">
<img class="greg" src="assets/images/greg-transparent.png">
</div>
MY CSS:
.banner-wrap {
position: relative;
width: 100%;
max-width: 796px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.banner-wrap div {
font-size: 1.6em;
position: absolute;
bottom: 59px;
left: 0px;
width: 100%;
height: auto;
z-index: 40;
font-family: 'Kaushan Script', cursive;
color: #FFF;
letter-spacing: 0.2em;
opacity: 0.9;
text-align: center;
text-shadow: 1px 1px 1px #999;
}
.banner-wrap img.banner {
position: absolute;
bottom: 59px;
left: 0px;
width: 100%;
height: auto;
z-index: 30;
}
.banner-wrap img.greg {
position: absolute;
bottom: 30px;
right: -50px;
width: 19vmin;
max-width:180px;
height: auto;
z-index: 40;
}
+3
source to share