浮動文本忽略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中的邊距

回答

相關問題