Maksymalna szerokość nie działa dla IE 11

Question

Jestem bardzo nowym projektantem i stworzyłem własny motyw WordPress, który działa zgodnie z oczekiwaniami w FireFox, Chrome i Operze. Problem pojawia się w InternetExplorer (korzystam z systemu Windows 7 z IE 11).

Wygląda na to, że InternetExplorer 11 nie rozumie kodu CSS o maksymalnej szerokości. Mam ten CSS:

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

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

Kod HTML jest coś takiego:

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

Maksymalna szerokość 1200 pikseli jest totalnie ignorowane przez InternetExplorer. Możesz to zobaczyć podczas ładowania na żywo mojej strony w IE i innej przeglądarce do porównania. Na przykład: http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep

I tu przykład JSfiddle: http://jsfiddle.net/z4s01yxz/

znalazłem inne artykuły do ​​StackOverflow temat problemów max-width na IE, ale nie mógł osiągnąć bymyself poprawek, dlatego jestem prośbą o pomoc. Mam nadzieję, że ktoś może mi w tym pomóc, z góry dzięki.

Problem polega na tym, że w InternetExplorer strona rozwija się, aby wypełnić całą szerokość, ponieważ maksymalna szerokość jest ignorowana. Możesz sprawdzić to zdjęcie, aby zobaczyć różnicę: i.imgur.com/kGr8wk1.jpg

P.S: Przepraszamy za mój zły angielski.

Answer 1

Myślę, że problem nie jest pochodzących z max-width ale z main elementu ...

Element main nie jest w pełni obsługiwana przez IE11 (source).

2 rozwiązania:

• Zmiana elementu <main> do <div>. Demo: http://jsfiddle.net/z4s01yxz/2/
• Dodaj main { display: block; } do swojego CSS. Demo: http://jsfiddle.net/z4s01yxz/1/