发表新帖
发表新帖

IE8 issue with Twitter Bootstrap 3

后端 未结
关注
22 2172
情歌与酒
情歌与酒 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:25

    You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup

    Note See also: https://github.com/scottjehl/Respond/pull/206

    Update:

    Please read: http://getbootstrap.com/getting-started/#support

    In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

    See also: https://github.com/scottjehl/Respond

    For this reason the basic template contains these lines in the head section:

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->
    0 讨论(0)
  • 借酒劲吻你
    2020-11-22 14:25

    I have a fix for this issue. Actually IE7 and 8 doesnt support the @media properly and if you check the css for “col-md-*” classes and there width is given in media width 992px. Just create a new css file IE eg: IE.css and add in the conditional comments. And then just copy the classes required for your design directly with any media queries there and you are done.

    0 讨论(0)
  • 野的像风
    2020-11-22 14:25

    my head tag is like this:

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

    if you want to try in local...try through localhost, or create a QA server and set the content and try.

    We need respond.js for bootstrap 3 and it wont work in local machine if we just put it in js and append it to html in header. It will say access denied. it works only through server as IE has security restriction. :P

    0 讨论(0)
  • 臣服心动
    2020-11-22 14:26

    Make sure you link the bootstrap source separately

    If you use LESS or SASS don't be to greedy with compiling the styles. In my project I included bootstrap.min.css in my main style, on the top of the file - so there should be only one request for all styles.

    And because of that, the boostrap classes did not work properly. When added separately, works as expected.

    0 讨论(0)
  • 逝去的感伤
    2020-11-22 14:27

    Needed to add - <meta http-equiv="X-UA-Compatible" content="IE=edge">

    I was using Bootstrap 3 - had it working on IE on my local.

    I put it live didn't work in IE.

    Just Bootstrap doesn't include that line of code in their templates, I'm not sure why but it might be due to it not being W3C compatible.

    0 讨论(0)
  • 轮回少年
    2020-11-22 14:28

    I also had to set the following META tag:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    0 讨论(0)
 看不清?
提交回复
热议问题