2011-12-27 10 views
0

お祝いの挨拶スタッカー。私は、 polyfillとhtml5.js shivをIE7とIE8に使用して、CSSのメディアクエリで応答性の高いsiteを実行しました。私が最初にそれらのブラウザでページを読み込むと、フォントのスタイルが正しく動作する前に、タイムズ・ローマンで大規模なテキストが短く点滅することがあります。誰かがこの問題を見ているのですか、誰かが間違っていることを提案できますか?私はWebフォントを使用していません。私はemでフォントのサイジングをしています。私は体のフォントを10pxと62.5%に設定しようとしましたが、違いはありません。これは、応答ポリ充てん剤の特殊性ですか?IE7、IE8の最初の読み込み時に大規模なフォントサイズ

乾杯すべて

答えて

1

あなたはFOUCを試しています!未整形のコンテンツのフラッシュ。リンクにはこれを避ける方法が含まれています。あなたのスタイルを非同期的に読み込んでいる場合、あなたのスタイルがあなたのコンテンツにまだ適用されていないページの生活の中で、この瞬間をなぜ実験するのかを説明するかもしれません。それはpolyfillsのあなたの使用によって引き起こされる可能性があり、私はそれを最小限に抑えるためにページと同時にロードされたスローアウェイスタイルを持つことをお勧めしたいと思います。

+0

i love bluerobot – albert

+0

おかげでsamy ..面白いページ。私は@importを使用していないので、私の頭にリンクとスクリプトの要素があるので、polyfillが何とか私のFOUCを生成しているように見えます。この人https://github.com/Modernizr/Modernizr/issues/286はRespond.jsが「HEADから読み込んでブロックする必要がある」と言います。そうでなければFOUCを引き起こします。 「ブロック」の意味が分からないのですが、頭の中のrespond.jsにリンクしています。うーん。 –

1

あなたのポストのリンクが私に壊れているので、コードが見えません。

この現象の考えられる理由の1つは、外部CSSファイルを含める方法です。あなたの代わりに<link>要素を使用して(ない身体中)<head>要素のすべてのCSSファイルを含めるようにしてくださいする

@import試みを使用した場合はもう一つの理由は、過剰な重量またはこれらのCSSファイルの量になる可能性:ブラウザがすべてのルールを読み込んで解析するのに時間がかかることがあります。サーバーが圧縮されたコンテンツを提供できるようになっている場合は、gzip圧縮ですべてのcssファイルを配信してください(可能な場合は、 cssリクエストの量を減らすようにしてください(有効な例を得るためにhtml5ボイラープレートの.htaccessを見ることができます)

あなたのcssファイルを1つのファイルにまとめると、通常gzip圧縮は圧縮一度に1ファイル。

最後ではなく、それほど重要なのは、あなたのCSSルールのパフォーマンス改善:ブラウザが一般的要素にこのスタイルを適用するために多くの時間がかかりますので、常に特定のルールとは* { margin: 0; padding: 0 }ような一般的な発言を避けるには、深さは常に使用することを

+0

Fabrizioの詳細なアドバイスをありがとう。今朝私のリンクはOKです。私はあなたが話しているほとんどのステップを行っています:私は@importを使用していません。私はすべてのCSSを1つのミニファイルにまとめました。これはgzippedで提供され、CSSルールはかなり特殊です。私のCSSファイルの25KBが小さくなりましたが、これはかなり大きいかもしれません。私は規則の数を減らすことができるかどうかを調べるために私は戻って行く必要があると思う。私はこの問題を断続的にしか見ていません。 –

関連する問題