web-dev-qa-db-ja.com

bootstrap 3.2.0グリフィコンがInternet Explorerに表示されない

Twitter bootstrap 3.2.0を使用しており、ff、chrome、およびoperaで正しく動作するグリフコンを使用していますが、Internet Explorerには表示されません。 。

奇妙なことに、getbootstrap.comのWebサイトを開いて「コンポーネント」セクションを見ると、それらが適切に表示されていないため、実装に関する問題を疑っています。

他の誰かが同様の問題を抱えていますか??または、この動作について何か知っていますか？

Internet Explorer 11での外観のScrennshotを次に示します

http://we.tl/nsDnTiZqoZ

twitter-bootstrapinternet-explorerglyphicons
21
mattFer

OK、自分で問題を解決しました。

問題は、どういうわけか私のIEはフォントのダウンロードが無効になっている特定のセキュリティ状態になったということでした。

そこで、「保護モード」のカスタムレベルを変更しました。これは、インターネットオプションメニューの[セキュリティ]タブで確認できます。

「レベルのカスタマイズ...」ボタンをクリックした後、「フォントのダウンロード」を検索し、「有効」に変更する必要があります。

誰か助けてくれてありがとう！

40
mattFer

同様の問題が発生している可能性のある人のために、特定のキャッシュ制御状況下でwebfontがレンダリングされない原因となるInternet Explorerのバグがあります。

サーバーがヘッダーを送信している場合プラグマ：no-cacheおよび/またはCache-Control no-storeを指定すると、IE toグリフのレンダリングに失敗しました。

これを追跡するのに何時間もかかったので、ここに投稿することで時間を節約できることを願っています！

30
Tom Mettam

アプリケーションのリソースフォルダーではなく、CDNからbootstrap.cssをロードします。 CDNから読み込んだ後、私にとってはうまくいきました。

[ネットワークのチェックイン]タブで、glyphicon-screenshotを使用しているファイルまたは読み込まれていないアイコンを確認します。私の場合、それは「glyphicon-screenshot」ですIE 11 browser。

そのチェックの前に、フォントが有効になっています ここに画像の説明を入力してください そしてロードされていないアイコンはスタイルタブf12デバッグツールにエラーを表示します。 ここに画像の説明を入力

1
Jagadeeswara Rao

これは答えるには遅すぎますが、最近私はAngular 4 + grailsをバックエンドとして使用する問題に直面しました。

Cache-control : 'no-store'.

また、modified-sinceやexpiresなどのようなヘッダーはありません。これが問題の原因でした。この問題を修正するために、以下のようにapplication.ymlを更新しましたが、うまくいきました。

grails:
    resources:
        cachePeriod: 10

これにより、以下のような応答ヘッダーが設定されます

Cache-Control   : max-age=10
1
Rajeesh K

このスレッドで言及したように： github

問題は、ブラウザ（IE 11）が受信する必要があることです。

  • 静的コンテンツファイルには、 "public、max-age = 600"のCache-ControlとPragmaが必要です
  • 角度リクエストには、「キャッシュなし」のCache-ControlおよびPragmaが必要です。

私のアプリ（.netコア+アンギュラー）

app.js

var cacheConfig = function ($httpProvider) {

$httpProvider.defaults.headers.common["Cache-Control"] = "no-cache";
$httpProvider.defaults.cache = false;

if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}

$httpProvider.defaults.headers.get["If-Modified-Since"] = "0";
};

Startup.cs

  app.UseStaticFiles(new StaticFileOptions
            {
                OnPrepareResponse = ctx =>
                {
                    ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=600");
                    ctx.Context.Response.Headers.Append("Pragma", "public,max-age=600");
                    //ctx.Context.Response.Headers.Append("ETag", DateTime.Now.Ticks.ToString());
                }
            });
1
zchpit

Wildflyセットアップで解決するには、untertowセクションでstandalone.xmlファイルを変更する必要があります。

<server name="default-server">
    <Host name="default-Host" alias="localhost">
        ...
        <filter-ref name="custom-max-age" predicate="path-suffix['.woff'] or path-suffix ['.woff2'] or path-suffix ['.ttf'] or path-suffix ['.svg'] or path-suffix ['.eot'] or path-suffix ['.otf']"/>
    </Host>
</server>
<filters>
    <response-header name="custom-max-age" header-name="Cache-Control" header-value="public"/>
</filters>
0
dblum

Nginxセットアップを解決するために、これを設定ファイルに追加しました

# Favicon and fonts
location ~* \.(ico|woff|ttf|svg|eot|otf)$ {
        expires 1w;
        access_log off;
        add_header Cache-Control "public";
}
0
nbaosullivan

この場合、エンタープライズWindows 10イメージには、IE11のみに影響する信頼できないフォントをブロックする設定があります。 Chrome/FF/Edgeはすべて、フォントを正しく表示します。 IE11で個人用マシン（会社のマシンではない）でサイトにアクセスすると、フォントが完全に正常に表示されました。

詳細については、この記事を参照してください。

https://blogs.technet.Microsoft.com/secguide/2017/06/15/dropping-the-untrusted-font-blocking-setting/

0
Daryl