我是一个非常新的设计师，创建了我自己的 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 完全忽略了最大宽度 1200px。您可以在 IE 和其他浏览器中实时加载我的网页中看到它以进行比较。例如:http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep
这里有一个 JSfiddle 的例子:http://jsfiddle.net/z4s01yxz/
我在 StackOverflow 上找到了其他关于 IE 最大宽度问题的文章，但我自己无法解决，这就是我请求帮助的原因。希望有人能帮我解决这个问题，在此先感谢。
实际问题是，在 InternetExplorer 中，网页会扩展以填满所有宽度，因为最大宽度被忽略了。您可以查看此图片以查看不同之处:i.imgur.com/kGr8wk1.jpg
P.S:抱歉我的英语不好。
最佳答案
我认为您的问题不是来自 max-width但来自 main元素...
main IE11 不完全支持元素 ( source )。
2 种解决方案:
- 更改您的
<main>元素到<div>.演示:http://jsfiddle.net/z4s01yxz/2/ - 添加
main { display: block; }到你的 CSS。演示:http://jsfiddle.net/z4s01yxz/1/
关于html - 最大宽度不适用于 IE 11，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28794718/