max-width non funziona per IE 11

Question

Sono un designer molto nuovo e ho creato il mio tema WordPress e funziona come previsto su FireFox, Chrome e Opera. Il problema arriva con InternetExplorer (sto usando Windows 7 con IE 11).

Sembra che InternetExplorer 11 non capisca il CSS di larghezza massima. Ho questo CSS:

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

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

il codice HTML è qualcosa di simile:

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

Il max-width 1200px è totalmente ignorato da InternetExplorer. Puoi vederlo dal vivo caricando la mia pagina web in IE e altri browser da confrontare. Per esempio: http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep

Ed ecco un esempio JSfiddle: http://jsfiddle.net/z4s01yxz/

ho trovato altri articoli in StackOverflow sui problemi max-width in IE, ma non sono riuscito a ottenere un bymyself correzione, è per questo che sto chiedendo aiuto. Spero che qualcuno possa darmi una mano con questo, grazie in anticipo.

Il vero problema è che in InternetExplorer la pagina Web si espande per riempire tutta la larghezza perché la larghezza massima viene ignorata. Puoi controllare questa immagine per vedere la differenza: i.imgur.com/kGr8wk1.jpg

P.S: Scusa per il mio pessimo inglese.

Answer 1

Credo che il problema non è venuta da max-width ma da main elemento ...

L'elemento main non è pienamente supportato da IE11 (source).

2 soluzioni:

• Cambia la tua elemento <main> ad un <div>. Demo: http://jsfiddle.net/z4s01yxz/2/
• Aggiungi main { display: block; } al tuo CSS. Demo: http://jsfiddle.net/z4s01yxz/1/