发表新帖
发表新帖

IE8 issue with Twitter Bootstrap 3

后端 未结
关注
22 2190
情歌与酒
情歌与酒 2020-11-22 13:48

I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8.

In IE8 it seems to be displaying elements o

相关标签:
22条回答
  • 挽巷
    2020-11-22 14:17

    Just as a heads up. I had the same problem and none of the above fixed it for me. Eventually I found out that respond.js doesn't parse CSS referenced via @import. I had the whole bootstrap.min.css imported via @import into my main.css.

    So make sure you don't have any CSS that contains your media queries referenced via @import.

    0 讨论(0)
  • 栀梦
    2020-11-22 14:18

    I faced the same problem, tried the first answer but something was missing.

    If you guys are using Webpack, your css will be loaded as a style tag which is not supported by respond.js, it needs a file, so make sure bootstrap is loaded as a css file

    Personally I used extract-text-webpack-plugin 

    const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")

module.exports = {
    context: __dirname+"/src",
    entry: "./index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    plugins: [
        ...,
        new ExtractTextPlugin("./dist/bootstrap.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            ...,
            // your css loader excluding bootstrap
            {
                test: /\.css$/,
                loader: "style!css",
                exclude: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ]
            },

            {
                // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
                include: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ],
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
            }
        ]
    }
}

    Hope it will help you

    0 讨论(0)
  • 一整个雨季
    2020-11-22 14:19

    After verifying:

    • DOCTYPE
    • X-UA-Compatible meta tag
    • Inclusion of html5shiv.js and respond.js (and downloading the latest versions)
    • respond.js being local
    • Hosting site from a web server and not from File://
    • Not using @import
    • ...

    Still col-lg, col-md, and col-sm were not working. Finally I moved the references to bootstrap to be before the references to html5shiv.js and respond.js and it all worked.

    Here is a snippet:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>
    0 讨论(0)
  • 故里飘歌
    2020-11-22 14:20

    Just in case. Make sure you load the IE specific js files after you load your css files.

    0 讨论(0)
  • 遥遥无期
    2020-11-22 14:24

    put respond.js at bottom of page but before closing body tag and here is link of respond.js and run this code in your localhost.

    https://github.com/scottjehl/Respond

    0 讨论(0)
  • 醉梦人生
    2020-11-22 14:24

    I've read every comment here, tried everything.. but couldn't get it to work with Windows 7 - Internet Explorer 11 (with document mode: IE8).

    Then it came to mind that running a document mode (IE8) isn't the same as the real IE8, so I installed Windows Virtual PC (Windows 7 with Internet Explorer 8) and tadaaaa... it works like a charm!

    I've put this piece of code JUST at the bottom of the page to make it work:

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题