Bootstrap 3 - Conteneur étiré sur IE8

J'écris du HTML pour une page et j'ai aussi utilisé bootstrap 3. La page semble être bien dans FF, Chrome, IE9 mais ne fonctionne pas correctement dans IE8, IE7.Bootstrap 3 - Conteneur étiré sur IE8

Problème: Le contenu principal semble être étiré complètement à travers la page, à savoir se comporte comme fluide où, comme dans d'autres navigateurs fonctionne très bien.

choses que j'ai essayé: Comme indiqué dans d'autres forums, j'ai essayé, y compris respond.js, balise meta comme dans le code ci-dessous ("X-UA-Compatible" content = "IE = bord"), mais rien HTML5shiv semble fonctionner. J'ai lu que bootstrap 3 ne supporte pas IE7 officiellement, mais même IE8 donne ce problème. Il semble que la classe de conteneur ne soit pas appliquée à IE8/7.

Quelqu'un peut-il aider s'il vous plaît à ce sujet? Voici le code HTML pour cela. En outre, son violon sur - http://jsfiddle.net/CPaDb/2/

code

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<title></title> 
<link rel="stylesheet" type="text/css" href="css/main.css"/> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
<!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
</head> 

<body> 
<div class="container"> 
    <div class="logo-cont"> 
     <a href="home.html" class="logo-link></a> 
    </div> 

    <div class="main-cont"> 
     <div class="site-box-cont"> 
      <ul class="site-box-list clearfix"> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
      </ul> 

     </div> 
    </div> 
</div> 
<script language="javascript" type="application/javascript" src="js/jquery-1.10.2.min.js"></script> 
<script language="javascript" type="application/javascript" src="js/bootstrap.min.js"></script> 
<script language="javascript" type="application/javascript" src="js/respond.min.js"></script> 
</body> 
</html>

CSS

.logo-cont {padding:35px 0 35px 250px;} 
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; } 

.main-cont {background:#2d3a42;} 
.site-box-cont {width:670px; margin:0 auto; padding:150px 0} 
.site-box-list li {float:left; margin:0px 15px 15px 0px;} 
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;} 
.site-box:hover {background:#acd037;}

Source

2013-08-29 whyAto8

J'ai eu ce problème avec même Bootstrap 2. Finalement Je viens d'ajouter un IE7/8 seulement feuille de style et définir la largeur du corps à 940px – Bojangles

Il y a un certain nombre d'actions émises en cours ... parmi eux, vous utilisez la Doctype XHTML 1.0, au lieu du type HTML5; il vous manque une citation de fermeture sur le lien "home.html".

Étant donné que JSFiddle n'est pas compatible avec les tests IE8, je ne peux pas publier une démo JSFiddle. Mais j'ai IE8 et testé le code suivant dans IE8, FF17 et Chrome 29. Faites-moi savoir si vous avez besoin de quelque chose de plus ou avez des questions.

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<title>Bootstrap Sample</title> 

<link rel="stylesheet" href="css/bootstrap.min.css"> 
<style type="text/css"> 
.logo-cont {padding:35px 0 35px 250px;} 
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; } 

.main-cont {background:#2d3a42;} 
.site-box-cont {width:670px; margin:0 auto; padding:150px 0} 
.site-box-list li {float:left; margin:0px 15px 15px 0px;} 
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;} 
.site-box:hover {background:#acd037;} 
</style> 
<script src="js/jQuery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/respond.min.js"></script> 
<!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
</head> 

<body> 

<div class="container"> 

    <div class="logo-cont"> 
     <a href="home.html" class="logo-link"></a> 
    </div> 

    <div class="main-cont"> 
     <div class="site-box-cont"> 
      <ul class="site-box-list clearfix"> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
       <li><a href="#" class="site-box"></a></li> 
      </ul> 

      </div> 
     </div> 
</div> 

</body> 
</html>

Source

2013-09-09 21:03:24 PhilNicholas

Ce que je pris conscience était qu'il était tout type de lié à respond.js ne fonctionne pas. Il était nécessaire de faire fonctionner les requêtes média dans IE8, et cela ne fonctionnait pas localement, mais s'exécuter sur localhost a résolu le problème. Mais je vois aussi vos contributions utiles, celles qui sont prises et tout est réglé. Je vous remercie. – whyAto8

Merci, @ whyAto8. Malheureusement Respond.js ne fonctionne pas localement en raison des restrictions de sécurité dans le navigateur, comme nous [discuté sur un autre thread] (http://stackoverflow.com/questions/18544310/respond-js-not-working-locally-support- for-media-queries-in-ie8/18708054). PS: Si ma réponse ci-dessus répondait en fait à votre question, pourriez-vous la marquer comme une réponse acceptable? – PhilNicholas

Bootstrap 3 - Conteneur étiré sur IE8

Répondre

Questions connexes