Question

我有一个向左浮动的span标签，由于某种原因，它在段落文本的其余部分上方移动，实际上在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>

关于会导致文本突然变化的想法？

Answer 1

你可以这样做：

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

Answer 2

事实证明问题与字体有关。出于某种原因，当您使用@ 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;
}

浮动文本忽略IE中的保证金

2 个答案: