it-swarm.com.de

max-Breite funktioniert nicht für IE 11

Ich bin ein sehr neuer Designer und habe mein eigenes WordPress-Theme erstellt, und es funktioniert wie erwartet bei FireFox, Chrome und Opera. Das Problem tritt beim InternetExplorer auf (ich verwende Windows 7 mit IE 11).

Scheint, dass InternetExplorer 11 das CSS mit maximaler Breite nicht versteht. Ich habe dieses CSS:

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

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

Der HTMl-Code sieht so aus:

<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>

Die maximale Breite von 1200 Pixeln wird vom InternetExplorer völlig ignoriert. Sie können es im Live-Laden meiner Webseite in IE und einem anderen Browser zum Vergleichen sehen. Zum Beispiel: http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep

Und hier ein Beispiel JSfiddle: http://jsfiddle.net/z4s01yxz/

Ich habe in StackOverflow andere Artikel über Probleme mit der maximalen Breite im Internet Explorer gefunden, konnte aber keine Korrektur von mir selbst finden. Deshalb fordere ich Hilfe an. Ich hoffe, dass mir jemand dabei helfen kann, danke im Voraus.

Das eigentliche Problem ist, dass in InternetExplorer die Webseite so erweitert wird, dass sie die gesamte Breite ausfüllt, da max-width ignoriert wird. Sie können dieses Bild überprüfen, um den Unterschied zu sehen: i.imgur.com/kGr8wk1.jpg

P.S: Entschuldigung für mein schlechtes Englisch.

14
Zeokat

Ich denke, dein Problem kommt nicht von max-width, sondern von main-Element ...

Das main-Element wird von IE11 ( source ) nicht vollständig unterstützt. 

2 Lösungen:

22
Guy

Ich habe eine Bedingung, in meinem Fall habe ich ein Bild mit übergeordneten Divs im Tabellenlayout. Meine Bedingung war, die Bildmitte in die Mitte zu stellen. Wenn das Bild groß ist, dann max. Breite auf 100%. Um die maximale Breite zu erreichen, hatte ich den folgenden Code:

.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;
}

Wenn Sie in der obigen Lösung das Tabellenlayout entfernen: Behoben, funktioniert die maximale Breite in IE11 und darunter nicht.

0
Suraj Shakya