0

我有一个向左浮动的跨度标签，由于某种原因，它向上移动到段落文本的其余部分之上，实际上在 ie8 和 ie7 中被切断了。文本在 ie9 中显示良好，但显示在段落中其余文本的上方。span 标签的 CSS 是：

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

有什么想法会导致文本像那样颠簸吗？

4

2 回答 2

0

你可以这样做：

<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-13T21:06:04.880 回答
0

原来问题与字体有关。由于某种原因，当您使用@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-14T18:45:23.517 回答