最大宽度不适用于 IE 11答案

【问题标题】：max-width not working for IE 11最大宽度不适用于 IE 11
【发布时间】：2015-05-01 21:57:50
【问题描述】：

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

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

最大宽度 1200px 完全被 InternetExplorer 忽略。您可以在 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

P.S：对不起，我的英语不好。

【问题讨论】：

请说明实际问题是什么（忽略是不够的）并提供代码示例在问题中进行演示。站外链接是不够的。
完成@Paulie_D，我添加了更多信息、示例代码和屏幕。希望这已经足够了。

标签： html css internet-explorer

【解决方案1】：

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

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

2 个解决方案：

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

【讨论】：

你是我的英雄，感谢您的解决方案。可悲的是，我无法投票赞成您的解决方案（不是 enogth 声誉），但效果很好。谢谢！
欢迎@Zeokat。乐意效劳。如果这个或任何答案已经解决了您的问题，您不能投票，但您可以通过单击复选标记accept it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。
谢谢！也帮了我！
没有最大宽度只是个问题。 IE11 不支持

【解决方案2】：

我有一个条件，在我的情况下，我在表格布局中有带有父 div 的图像。我的条件是使图像居中居中，如果是大图像，则最大宽度为 100%。所以，为了使最大宽度起作用，我有以下代码：

.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，则最大宽度在 IE11 及以下版本中不起作用。

【讨论】：

【解决方案3】：

使用这个，

显示：-ms-grid； -ms-grid-columns: 最大内容；

【讨论】：