2014-12-31 1 views
3

У меня есть сайт, над которым я работаю, где у меня есть текст, который нужно просматривать рядом с тем же размером во всех браузерах. Я использую 1.6em в качестве размера шрифта на фотографиях ниже. Проблема в том, что в IE 11 шрифт выглядит намного больше, чем в Chrome/FF/Safari. Я пробовал каждый параметр размера шрифта, о котором я могу думать, например; px, vh, vw, vmin,%, но все они отображают больше в IE 11, чем во всех других браузерах. Кто-нибудь знает хорошую работу для этого?Размер шрифта, отображаемый на IE 11 по сравнению с другими браузерами

Не уверен, что это имеет значение, но я использую шрифт google вместо обычного шрифта.

образца в 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; 
} 
+0

Я думаю, вы могли бы найти свое решение в этом посте http://stackoverflow.com/questions/6322916/ie9-bug-with-increased-font-size-of-css-content. Он предлагает использовать rem вместо em. –

+0

Спасибо ... Я еще не слышал о реми. Я попробовал и, к сожалению, получаю точно такой же результат .... –

ответ

0

Nevermind ... понял это. поскольку я назначал размер шрифта с помощью селектора div, стиль user-agent для тега h1 переопределял мой стиль шрифта div. Изменен стиль моего шрифта, чтобы использовать селектор h1, и все хорошо.