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的评论中所述

对于所有浏览器，类“row”的一般最大宽度限制为62.5rem，从.fullWidth-3中删除max-width：initial并且您将看到与IE中相同的行为。

而是设置max-width：100％而不是保留最初的东西，这在浏览器中是不一致的

基础 - 资源管理器问题的全宽

1 个答案: