浮動小数点テキストがIEで余白を無視する

何らかの理由で段落テキストの残りの部分を上に移動し、実際にはie8とie7で切り捨てられたスパンタグが左に浮かんでいます。テキストはie9でうまく表示されますが、段落内の残りのテキストの上に表示されます。 spanタグのための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に変更すると、うまく読み込まれます。多分、ieはサイズを正しく決定しません。 – jg314

私はテストするIEのコピーを持っていませんが、行の高さの問題かもしれませんか？ line-height：normalを設定してみてください。 – michaelward82

それは問題がフォントとしなければならなかったが判明しました。何らかの理由で@ font-familyを使って "Bebas"フォントを読み込むと、IEとFirefoxの両方がフォントの実際の高さを理解できません。私は、FirefoxとIEを特にターゲットにするためにCSSを使ってこれを修正しました。理想的ではありませんが、問題を修正しました。

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で余白を無視する

答えて

関連する問題