0

漢字学習用のフラッシュ カードを含む Web サイトを開発しています。問題は、IE が、私がテストした他のブラウザーよりもライン上でフォントをわずかに高くレンダリングすることです。これは通常は大したことではありませんが、フラッシュカードを使用すると、フォントが大きすぎて配置の違いが非常に顕著になります。

ここに Web ページのダミー バージョンをアップロードしました: http://mandaclu.com/dummy/flashcard.html。Firefox/Chrome と IE の両方でリンクを開いて違いを確認してください (同じ問題を含む非常に単純なページを表示するには、次のリンクを使用してください: http://mandaclu.com/dummy/test.html )。

私はいろいろ調べましたが、ブラウザに関係なく、そのキャラクターをページの同じ場所に配置する方法が見つかりませんでした. 誰にもアイデアはありますか？(CSS のリセットも機能していません) ご協力いただきありがとうございます。

4

1 に答える 1

0

IE と他のブラウザーが line-height > text-size でテキストをレンダリングする方法の違いのようです。

line-height = text-size を設定し、トップパディングを追加して、代わりにテキストを強制的に下げてみてください。

例えば。

#char {
    display: inline-block;
    font-size: 180px;
    line-height: 180px;
    margin: 0;
    padding: 30px 0 0 0;
    position: relative;
    vertical-align: bottom;
    width: 260px;
  }
于 2013-11-12T01:33:13.727 に答える