Floated Text Ignoriert Margin in IE

Ich habe ein Span-Tag nach links schweben, die aus irgendeinem Grund über den Rest des Absatzes Text bewegt und ist eigentlich abgeschnitten in ie8 und ie7. Der Text wird in ie9 angezeigt, wird jedoch oberhalb des restlichen Textes innerhalb des Absatzes angezeigt. Die CSS für das span-Tag ist:Floated Text Ignoriert Margin in IE

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

Die HTML ist:

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

Irgendwelche Gedanken auf, was wäre der Text so stoßen verursachen?

Quelle

2012-04-13 jg314

try Position relativ zu geben –

Leider Position relativ habe nicht den Trick. Trotzdem danke. Ich denke, es könnte ein Problem mit der Schriftart sein, die ich mit @ font-family lade. Wenn ich die Schriftart zu Arial ändere, lädt es gut. Vielleicht bestimmt ie die Größe nicht richtig. – jg314

Ich habe keine Kopie von IE zum Testen, aber könnte es ein Problem mit der Zeilenhöhe sein? Versuchen Sie, die Zeilenhöhe einzustellen: normal; – michaelward82

Es stellt sich heraus, das Problem mit der Schrift zu tun hatte. Wenn Sie die Schriftart "Bebas" mit @ font-family laden, verstehen sowohl IE als auch Firefox die tatsächliche Höhe der Schriftart aus irgendeinem Grund nicht. Ich habe das behoben, indem ich CSS verwendet habe, um gezielt Firefox und IE anzusprechen. Nicht ideal, aber das Problem wurde behoben.

Hier ist, wie ich IE und Firefox ins Visier genommen habe. 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; 
}

Quelle

2012-04-14 18:45:23 jg314

Man könnte so etwas tun:

<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/

Quelle

2012-04-13 21:06:04

Floated Text Ignoriert Margin in IE

Antwort

Verwandte Themen