css - Foundation - 全宽与 Explorer 问题

Question

我正在试验 Foundation，我想构建一个具有全宽行的模板。在 Firefox 和 Chrome 上一切正常，但全宽在 IE 上不起作用(我使用的是 IE 11，所以我猜以前的版本也会受到影响)。

我的 html:

<div class="row fullWidth-3">
    <div class="small-12 columns navigation-3">Navigation</div>
    <div class="small-12 columns advertising-3">
        Advertising
        <div class="contentWidth-3">
            <div class="small-12 columns">TEST</div>
            <div class="medium-4 columns">TEST</div>
            <div class="medium-8" columns">TEST</div>
        </div>
    </div>
</div>

现在是 CSS 部分:

.fullWidth-3
    {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       max-width: initial;
    }

.contentWidth-3
    {

        width: 85%;
        margin:0 auto;
        color:#000;
        background-color:#FFF;
        -webkit-box-shadow: 0px 0px 8px -3px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 8px -3px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 8px -3px rgba(0,0,0,0.75);
    }   

.navigation-3
    {
        background-color:#000;
        color:#FFF;
        margin:0px;
        padding:5px;
        box-sizing:border-box; 
        font-size:19px;
    }

.advertising-3
    {
        background-color:#999;
        color:#FFF;
        margin:0px;
        padding:5px;
        box-sizing:border-box; 
        font-size:19px;
    }

IE 的宽度似乎限制在 1000 像素左右，而 Firefox 和 Chrome 显示的是预期的全宽 div。

我想保持基础 CSS 的整洁。您知道我该如何解决这个问题吗？

补充说明:- 仅此一项，它也不起作用

.fullWidth-3
    {
       width: 100%;
    }

谢谢洛朗

Answer 1

正如@GL.awog 在评论中提到的

Class "row" has a general max-width limit of 62.5rem for all browsers, remove max-width:initial from .fullWidth-3 and you'll see the same behaviour as in IE.

Rather set max-width:100% than leave initial thing, that is not consistent across browser