最大宽度不适用于 IE 11

Question

我是一个非常新的设计师，创建了我自己的 WordPress 主题，它在 FireFox、Chrome 和 Opera 上按预期工作。 InternetExplorer 出现了问题（我在 IE 11 中使用 Windows 7）。

似乎 InternetExplorer 11 不理解最大宽度 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/

我在 Whosebug 中找到了有关 IE 最大宽度问题的其他文章，但无法自行解决，这就是我请求帮助的原因。希望有人能帮我解决这个问题，在此先感谢。

实际问题是，在 InternetExplorer 中，网页会扩展以填满所有宽度，因为最大宽度被忽略了。您可以查看此图像以查看差异：i.imgur.com/kGr8wk1.jpg

P.S：抱歉我的英语不好。

Answer 1

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

IE11 (source) 不完全支持 main 元素。

2 个解决方案：

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

Answer 2

我有一个条件，在我的例子中，我在 table 布局中有父 div 的图像。我的条件是使图像居中，如果图像很大，则 max-width 到 100%。因此，为了使 max-width 正常工作，我使用了以下代码：

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

在上面的解决方案中，如果您删除 table-layout:fixed，max-width 在 IE11 及以下版本中不起作用。

Answer 3

使用这个，

显示：-ms-grid； -ms-grid-列：max-content；

最大宽度不适用于 IE 11

max-width not working for IE 11

html

css

internet-explorer