IE8 issue with Twitter Bootstrap 3

后端 未结 22 2193
情歌与酒
情歌与酒 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:38

    I've suffer the same problem in IE 10.0. I know this is not exactly the problem in the OP, but maybe it will be usefull for others.

    In my case, I had an empty line at the beginning of the document:

    [blank line]
    <!DOCTYPE html>
    <html lang="es">
    ...
    

    If the blank line is between the DOCTYPE and the tag, the problem is also shown:

    <!DOCTYPE html>
    [blank line]
    <html lang="es">
    

    Once I've removed the blank line, and without the magic X-UA-Compatible meta, IE 10 has started to render the site correctly.

    If you are using PHP and Smarty be careful with your Smarty comments because they will add those problematic blank lines :-)

    0 讨论(0)
  • 2020-11-22 14:40

    I have resolved below steps.

    (1) installed Respond.js module for drupal 7. (2) lessphp module for drupal 7 set in libraries, instead of module folder. (3) (3.1)<meta http-equiv="X-UA-Compatible" content="IE=edge">

    (3.2)

    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->  
    

    using cdn bootstrap from theme setting.

    To learn more, review my website blog for drupal design and development www.devangsolanki.com

    0 讨论(0)
  • 2020-11-22 14:41

    In my case, the bootstrap minified CSS was causing the issue. To make bootstrap 3.0.2 responsive in IE8 (emulated using the F12 Developer Tools) I had to:

    1 - Set the X-UA-Compatible flag.

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

    2 - Use the non-minified bootstrap.css, instead of bootstrap.min.css

    <link href="/css/bootstrap.css" rel="stylesheet" />
    

    3 - Add the respond.js (and html5shiv.js)

    <!--[if lt IE 9]>
      <script src="/js/html5shiv.min.js"></script>
      <script src="/js/respond.min.js"></script>
    <![endif]-->
    
    0 讨论(0)
  • 2020-11-22 14:44

    Don't forget to place your css links in the <head> as respond.js takes only those.

    0 讨论(0)
提交回复
热议问题