浮动文本忽略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

试举位置相对 – 2012-04-13 18:03:39

不幸的是，相对位置并没有这样的伎俩。不过谢谢。我认为这可能是我使用@ font-family加载的字体的问题。当我将字体更改为Arial时，它加载正常。也许ie不能正确确定尺寸。 – jg314 2012-04-13 19:15:25

我没有IE的测试副本，但可能是行高问题？尝试设置行高：正常; – michaelward82 2012-04-13 21:24:00

原来，这个问题曾与字体做。由于某些原因，当您使用@ font-family加载“Bebas”字体时，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中的边距

回答

相关问题