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完全忽略了max-width 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

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

我有条件，在我的情况下，我在表格布局中有父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及以下版本中不起作用。

Answer 3

使用此

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

最大宽度不适用于IE 11

3 个答案: