Question

我有一个网站，我正在处理我需要在所有浏览器上查看接近相同大小的文本。我在下面的图片中使用1.6em作为字体大小。问题是在IE 11中，字体看起来比在Chrome / FF / Safari中更大。我已经尝试了我能想到的每个字体大小调整选项，例如; px，vh，vw，vmin，％但是，IE 11中的所有浏览器仍然比所有其他浏览器更大。有谁知道这方面的好解决方案？

不确定它是否有所作为但我使用的是谷歌字体而不是常规字体。

Chrome中的示例（这应该是它的样子） enter image description here

IE 11中的示例 enter image description here

我的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选择器，一切都很好。

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

1 个答案: