html - IE 11 上显示的字体大小与其他浏览器不同

Question

我有一个正在工作的站点，其中有一些文本需要在所有浏览器上以接近相同的大小查看。我在下面的图片中使用 1.6em 作为字体大小。问题是在 IE 11 中字体看起来比在 Chrome/FF/Safari 中大得多。我已经尝试了所有我能想到的字体大小选项，例如； px,vh,vw,vmin,% 但是，所有这些在 IE 11 中仍然比所有其他浏览器渲染得更大。有谁知道一个好的解决方法吗？

不确定这是否有所不同，但我使用的是谷歌字体而不是常规字体。

Chrome 中的示例(这是它的外观)

IE 11 中的示例

我的 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>

我的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;
}

Answer 1

没关系...想通了。因为我使用选择器 div 分配字体大小，所以 h1 标签的用户代理样式覆盖了我的 div 字体大小样式。更改了我的字体大小样式以使用 h1 选择器，一切都很好。