IE 11不支持max-width属性

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>

在Internet Explorer中，max-width 1200px完全被忽略。您可以通过在IE和其他浏览器中加载我的网页来进行比较。例如：http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep

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

我在StackOverflow上找到了关于IE上max-width问题的其他文章，但无法自行修复，这就是为什么我请求帮助的原因。希望有人能给我帮助，非常感谢。

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

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

- Zeokat

---

请明确指出实际问题（忽略不足够），并在问题中提供代码示例以证明。外部链接是不充分的。 - Paulie_D

完成 @Paulie_D，我添加了更多信息、示例代码和屏幕截图。希望这已经足够了。 - Zeokat

Answer 1

我认为你的问题不是由于max-width引起的，而是由于main元素引起的...

main元素在IE11中不被完全支持(来源)。

有两种解决方案：

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

- Guy

---

你是我的英雄，感谢你提供的解决方案。可惜我不能给你的解决方案点赞（声望不够），但它非常好用。谢谢！ - Zeokat

欢迎，@Zeokat。很高兴能帮助你。如果这个或任何答案解决了你的问题，你可以通过点击勾号 接受答案 来确认。这表明你已经找到了一个解决方案，并给予回答者和你自己一些声望。这是没有义务的。 - Guy

谢谢！对我也有帮助！ - Giel Berkers

没有max-width是一个问题。它在IE11上不被支持。 - Maulik

Answer 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，则max-width在IE11及以下版本中无法正常工作。

- Suraj Shakya

Answer 3

请使用以下代码：

display: -ms-grid; -ms-grid-columns: max-content;

- Ijas Ahammed P