ブートストラップIE8互換処理の使い方-CSSチュートリアル-php.cn

ブートストラップIE8互換処理の使い方

高洛峰

リリース： 2017-03-22 15:16:21

オリジナル

1690 人が閲覧しました

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap IE8兼容性</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
        
        <!--[if lt IE 9]>
              <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
              <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        
    </head>

    <body>
        <div>
            <div>
                <div style="border: 1px solid red;">
                    左侧
                </div>
                <div style="border: 1px solid green;">
                    右侧
                </div>
            </div>
        </div>
    </body>

</html>

ログイン後にコピー

IE8 の場合は、メディアクエリをサポートするために追加の Respond.js ファイルを導入する必要があります。

1. http プロトコルでの効果 (http://192.168.12.40:8020/bootstrap/index.html):

使用bootstrap IE8兼容性处理的方法

2. ファイルファイルプロトコル IE8 での効果 (C: UsersdellDocumentsHBuilderProjectbootstrapindex.html)

使用bootstrap IE8兼容性处理的方法

上の図に示すように、グリッドレイアウトはサポートされなくなりました。

主な問題は次のとおりです:

Respond.js と `file://` プロトコル

file:// 协议

由于浏览器的安全机制，Respond.js 不能在通过 file:// ブラウザのセキュリティメカニズムにより、Respond.js は file 関数を正常に渡すことができません:// プロトコル (ローカル HTML ファイルを開くために使用されるプロトコル) を使用してアクセスされるページ。 IE8 でレスポンシブ機能をテストする必要がある場合は、必ず http プロトコルを介してページにアクセスしてください (Apache、nginx のセットアップなど)。

以上がブートストラップIE8互換処理の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。