Плавающий текст игнорирует маржу в IE

У меня есть тег span, плавающий влево, который почему-то перемещается вверх над остальным текстом абзаца и фактически обрезается в ie8 и ie7. Текст показывает штраф в ie9, но показан над остальной частью текста в абзаце. CSS для диапазона тега:Плавающий текст игнорирует маржу в IE

.stat { 
    font: 64px/100% @numbersFont; 
    letter-spacing: -3px; 
    color: @orange; 
    float: left; 
    margin: 0 15px 5px 0; 
}

HTML является:

<p> 
    <span class="stat">10x</span> 
One&nbsp;<a title="Fidelity® Charitable Gift Fund Volunteerism and Charitable Giving in 2009" href="http://www.fidelitycharitable.org/docs/Volunteerism-Charitable-Giving-2009-Executive-Summary.pdf" target="_blank">study on volunteerism</a>&nbsp;found “on average, those who have volunteered in the last 12 months donate ten times more money to charities than non-volunteers.” 
</p>

Любые мысли о том, что будет вызывать текст, ударяться, как это?

источник

2012-04-13 jg314

попытка дать позицию по отношению –

К сожалению, позиция относительно не сделать трюк. Спасибо хоть. Я думаю, что это может быть проблема с шрифтом, который я загружаю, используя @ font-family. Когда я меняю шрифт на Arial, он загружается нормально. Может быть, т. Е. Не определяет размер правильно. – jg314

У меня нет копии IE для тестирования, но может ли это быть проблемой линии? Попробуйте установить высоту линии: нормальный; – michaelward82

Оказывается, проблема была связана с шрифтом. По какой-то причине, когда вы загружаете шрифт «Bebas», используя @ font-family, IE и Firefox не понимают реальную высоту шрифта. Я исправил это, используя css, чтобы специально настроить Firefox и IE. Не идеальный, но он исправил проблему.

Вот как я нацелился на IE и Firefox. HTML:

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>> <![endif]--> 
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" <?php language_attributes(); ?>> <![endif]--> 
<!--[if IE 8]> <html class="lt-ie9" <?php language_attributes(); ?>> <![endif]--> 
<!--[if IE 9]> <html class="ie9" <?php language_attributes(); ?>> <![endif]--> 
<!--[if gt IE 9]><!--> <html class="" <?php language_attributes(); ?>> <!--<![endif]-->

CSS:

@-moz-document url-prefix() { 
    .stat { 
    padding-top: 12px; 
    } 
} 

.lt-ie9 .stat, 
.ie9 .stat { 
    line-height: 85px; 
}

источник

2012-04-14 18:45:23 jg314

Вы могли бы сделать что-то вроде этого:

<p> 
    <span class="stat">10x</span> 
    One&nbsp;<a title="Fidelity® Charitable Gift Fund Volunteerism and Charitable Giving in 2009" href="http://www.fidelitycharitable.org/docs/Volunteerism-Charitable-Giving-2009-Executive-Summary.pdf" target="_blank">study on volunteerism</a>&nbsp;found “on average, those who have volunteered in the last 12 months donate ten times more money to charities than non-volunteers.” 
</p> 

p { 
    padding-left:30px; 
    position:relative; 
} 
.stat { 
    font: 64px/100% @numbersFont; 
    letter-spacing: -3px; 
    color: @orange; 
    position:absolute; 
    left:0; 
    width:30px; 
}

http://jsfiddle.net/K6dk3/

источник

2012-04-13 21:06:04

Плавающий текст игнорирует маржу в IE

ответ

Смежные вопросы