9

「 Eric Meyer Reset 」を試してみると、font-size:100%適切なすべての要素のフォント サイズをリセットするという宣言に関する問題に出くわしました。要素は親のプロパティを font-size:100%継承する必要があることを意味しますが、IE のand要素とその子孫には当てはまりません (バージョン 6、7、8、および 9 でテスト済み)。font-size<sub><sup>

例（またはプレイグラウンドでのこのライブ例）：

// CSS:
sup,span {font-size:100%;}
// HTML:
if you try this in IE, <sup>this text will be smaller <span>and this even more</span></sup>

これは、これらの要素の唯一の不具合ではないため、IE が Web デザイナーに仕掛ける別の実装トリックのように思えます。私の推測では、IE は<sub>and<sup>要素に独自のハードワイヤード スタイルを適用し、下付き/上付きに加えてコンテンツを小さくしますが、この動作をリセットする方法がまったくない場合は見つけられません。

// この問題に直接返信してください。「UA 固有のスタイルシートを使用する」などの提案は、役に立つという気持ちを満たすかもしれませんが、トピックを満足させるものではありません :-)しかし、ここでこのトピックに対する答えを少なくとも 1 つ述べておきたいと思います。

編集:<sub> IE (IE9 までのすべてのバージョン) は、および<sup>その子孫のフォント サイズに可変係数 (フォント サイズに応じて0.6 ～ 0.8の間の sth) を乗算するように見えます。

理由は次のとおりです。固定サイズ (例: font-size:15px) が<sup>タグとそのすべての子孫に設定されている場合、それらのフォント サイズはすべて 10px (≅ 0.7 × 15px) 前後です。しかし、代わりに相対サイズが設定されている場合 (例: font-size:100%)、係数効果は<sup>要素からその子孫に伝播されます。したがって、第 1 レベルの子孫のフォント サイズは約 70% (親の ≅ 0.7 × 100% ) になります。<sup>第 2 レベルの子孫のフォント サイズは約 50% (祖先の ≅ 0.7 × 0.7 × 100% ) などです。<sup>この伝播は を使用すると壊れますfont-size:inherit。これは、要素がその親とまったく同じサイズでなければならないことを意味するためです。これは、要素の子孫に対して機能します。<sup>要素ですが、<sup>要素自体には、親要素よりも小さいフォント サイズが IE によって与えられます。

IE に参加している係数理論 :-) は、この例で見ることができます。また、これを「標準準拠」のブラウザと比較してください。

4

2 に答える 2

2

font-size:100%スタイルシートに reset-declarationを残し、許容可能な下付き文字/上付き文字を保持する唯一の「解決策」は、これまでのところ次のいずれかです。

  • 下付き文字/上付き文字のスタイル設定には、別の要素を使用します (例: <span>. セマンティクスに照らして間違いなく良い考えではありません →削除されました。
  • せいぜい UserAgent 固有のスタイルシート、条件付きコメントを使用し (今まで IE ≥ 7 では使用する必要がなかったので、これが心配でした)、明示的に各子孫のスタイルを変更して、「係数効果」を補正します →それだけの価値はありません:-)。
  • 誰もがIEに独自のルールがあることを確認できるようにそのままにしておきます（理想的/素朴に、次のバージョンで修正する必要がありますfont-size:inherit）。 →承ります。<sub><sup>

解決策＃2、これでうまくいきます（確かに調整できますが、概念だけです）：

<!--[if IE]>
<style>
  sup *,sub * {font-size:120%; font-size:inherit;}
</style>
<![endif]-->

最大のパフォーマンスを目指して努力しない限り (*セレクターのパフォーマンスの問題を参照してください)。

于 2011-07-24T14:12:57.100 に答える
0

私はそれをテストしませんでしたが、これまでのところ動作します:

sup,
sub {
    font-size: inherit;   /* all browser */
    font-size: 120%\0/;   /* wie only */
}
于 2015-05-11T15:10:13.220 に答える