web-dev-qa-db-fra.com

max-width ne fonctionne pas pour IE 11

Je suis un nouveau designer et j'ai créé mon propre thème WordPress. Il fonctionne comme prévu sur FireFox, Chrome et Opera. Le problème survient avec InternetExplorer (j'utilise Windows 7 avec IE 11).

Apparemment, InternetExplorer 11 ne comprend pas le CSS max-width. J'ai ce CSS:

.vi-container {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.vi-content {
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
}

Le code HTMl est quelque chose comme:

<div class="vi-container">
    <header class="vi-header">Header stuff</header>
    <main class="vi-content" itemtype="http://schema.org/Blog" itemprop="mainContentOfPage" itemscope="" role="main">
        <article class="post-content-wrap" itemtype="http://schema.org/BlogPosting" itemprop="blogPost" itemscope=""></article>
        <!-- more articles with contents -->
        <aside class="vi-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="" role="complementary"></aside>
    </main>
</div>

La largeur maximale 1200px est totalement ignorée par InternetExplorer. Vous pouvez le voir en direct chargeant ma page Web dans IE et un autre navigateur pour comparer. Par exemple: http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep

Et voici un exemple JSfiddle: http://jsfiddle.net/z4s01yxz/

J'ai trouvé d'autres articles dans StackOverflow sur les problèmes de largeur maximale sur IE, mais je ne pouvais pas me résoudre moi-même, c'est pourquoi je demande de l'aide. J'espère que quelqu'un pourra me donner un coup de main, merci d'avance.

Le problème réel est que dans InternetExplorer, la page Web se développe pour couvrir toute la largeur car la largeur maximale est ignorée. Vous pouvez vérifier cette image pour voir la différence: i.imgur.com/kGr8wk1.jpg

P.S: Désolé pour mon mauvais anglais.

htmlcssinternet-explorer
14
Zeokat

Je pense que votre problème ne vient pas de max-width mais de main element ...

L'élément main n'est pas entièrement pris en charge par IE11 ( source ). 

2 solutions:

22
Guy

J'ai une condition, dans mon cas, j'ai une image avec les divs parents dans la disposition du tableau. Ma condition était de faire le centre de l'image et si grande image, alors max-width à 100%. Donc, pour faire fonctionner max-width, j'avais le code ci-dessous:

.cmp-logo{
  diplay:table;
  table-layout:fixed;
  width:100%;
  height:100%;
}
.td{
  display:table-cell;
  vertical-align:middle;
}
.td img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:260px;
  margin:0 auto;
}

Dans la solution ci-dessus, si vous supprimez tableau-layout: fixed, max-width ne fonctionne pas dans IE11 et les versions antérieures.

0
Suraj Shakya