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) enter image description here

Sample in IE 11 enter image description here

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


1 answer


Nevermind ... figured it out. since I was assigning the font size using the div selector, the user-agent style for the h1 tag was overriding my div font style. Changed my font style to use the h1 selector, which is all good.



0


source







All Articles