最大宽度不适用于IE 11

Question

我是一个非常新的设计师,并创建了我自己的WordPress主题,它在FireFox,Chrome和Opera上按预期工作.问题来自InternetExplorer(我使用Windows 7和IE 11).

似乎InternetExplorer 11不了解max-width CSS.我有这个CSS:

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

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

HTMl代码类似于:

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

InternetExplorer完全忽略了最大宽度1200px.您可以在IE中和其他浏览器中实时加载我的网页进行比较.例如:http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep

这里有一个例子JSfiddle:http://jsfiddle.net/z4s01yxz/

我在StackOverflow中发现了关于IE上最大宽度问题的其他文章,但无法通过自己实现修复,这就是我要求帮助的原因.希望有人能帮我一把,谢谢你提前.

实际问题是,在InternetExplorer中,网页会扩展以填充所有宽度,因为忽略了max-width.您可以查看此图片以查看差异:i.imgur.com/kGr8wk1.jpg

PS:抱歉我的英文不好.

Answer 1

我认为你的问题不是max-width来自main元素......

mainIE11(源)不完全支持该元素.

2解决方案:

• 将您的<main>元素更改为<div>.演示:http://jsfiddle.net/z4s01yxz/2/
• 添加main { display: block; }到您的CSS.演示:http://jsfiddle.net/z4s01yxz/1/