最大寬度不適用於 IE 11

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 完全忽略了最大寬度 1200 像素。 您可以在 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

PS：對不起，我的英語不好。

Answer 1

我認為你的問題不是來自max-width而是來自main元素......

IE11 不完全支持main元素（ 來源）。

2個解決方案：

• 將您的<main>元素更改為<div> 。 演示： http : //jsfiddle.net/z4s01yxz/2/
• 添加main { display: block; } 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，則最大寬度在 IE11 及以下版本中不起作用。

Answer 3

用這個，

顯示：-ms-grid; -ms-grid-columns：最大內容；