Html 最大宽度不适用于 IE 11

max-width not working for IE 11

提问by Zeokat

I′m very new designer and created my own WordPress theme and it works as expected on FireFox, Chrome and Opera. The problem arrives with InternetExplorer (i′m using Windows 7 with IE 11).

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

Seems that InternetExplorer 11 don't understand the max-width CSS. I have this CSS:

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

The HTMl code is something like:

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>

The max-width 1200px is totaly ignored by InternetExplorer. You can see it in live loading my webpage in IE and other browser to compare. For example: http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep

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

And here an example JSfiddle: http://jsfiddle.net/z4s01yxz/

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

I found other articles into StackOverflow about max-width issues on IE, but couldn't achieve a fix bymyself, that's why i′m requesting help. Hope that someone can give me a hand with this, thanks in advance.

我在 StackOverflow 中找到了关于 IE 上最大宽度问题的其他文章，但我自己无法解决，这就是我请求帮助的原因。希望有人能帮我解决这个问题，提前致谢。

The actual problem is that in InternetExplorer the webpage expands to fill all the width because max-width is ignored. You can check this image to see the difference: i.imgur.com/kGr8wk1.jpg

实际问题是在 InternetExplorer 中，由于忽略了 max-width，网页会扩展以填充所有宽度。您可以查看此图片以查看不同之处：i.imgur.com/kGr8wk1.jpg

P.S: Sorry for my bad english.

PS：对不起，我的英语不好。

回答by Guy

I think your problem is not coming from max-widthbut from mainelement...

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

The mainelement is not fully supported by IE11 (source).

mainIE11 不完全支持该元素（来源）。

2 solutions :

2个解决方案：

• Change your <main>element to a <div>. Demo : http://jsfiddle.net/z4s01yxz/2/
• Add main { display: block; }to your CSS. Demo : http://jsfiddle.net/z4s01yxz/1/

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

回答by Suraj Shakya

I have a condition, in my case, I have image with parent divs in table layout. My condition was to make the image center center and if big image, then max-width to 100%. So, to make the max-width work I had the code below:

我有一个条件，就我而言，我在表格布局中有带有父 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;
}

In above solution, if you remove table-layout:fixed, the max-width does not work in IE11 and below.

在上述解决方案中，如果删除 table-layout:fixed，则最大宽度在 IE11 及以下版本中不起作用。