Foundation - 全宽与 Explorer 问题
Foundation - Full width with Explorer issue
我正在试验 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%;
}
谢谢
洛朗
正如@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
我正在试验 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%;
}
谢谢 洛朗
正如@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