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

問題はフォントに関係していたことが判明しました。@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 に答える
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 に答える