基础-完全宽度与资源管理器问题

Question

我正在实验基金会，我想要构建一个全宽度行的模板。在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的评论中所提到的

类"row“对所有浏览器的最大宽度限制为62.5rem，删除最大值:从..fullWidth 3中移除初始值，您将看到与IE中相同的行为。 设置最大宽度:100%，而不是保留初始内容，这在浏览器之间是不一致的。