calc（）的替代方案

Question

我有一个具有自动宽度和左右边距的容器：

.inner {
   margin-left: 20px;
   margin-right: 20px;
   width: auto;
}

并且在这个容器中有不同的元素。一些元素应该是页面的100％（没有边距），为此我使用calc（）：

.fullwidthelement {
   left: -20px;
   width: calc(100% + 40px);
   width: -webkit-calc(100% + 40px);
}

但看起来Safari（Windows 8上的5.1.7）无法解决这个问题。在Web Inspector中，我看到了一个黄色感叹号，它没有采用宽度规则：

那么，有没有解决这个问题，或者我可以通过某种方式让Safari能够正常工作吗？

Answer 1

首先请务必注意，您应始终使用供应商前缀before the unprefixed properties指定属性：

.fullwidthelement {
   left: -20px;
   width: -webkit-calc(100% + 40px);
   width: calc(100% + 40px);
}

第二次，如果您选中canIuse（点击＆＃34;全部显示＆＃34;），您会看到safari 5.1不支持{{1}功能。

Answer 2

负利润率对您有用吗？

＆＃13;

＆＃13;

#container
{
    border: 1px solid;
    width: 400px;
}

.inner
{
    background: red;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    width: auto;
}

.fullwidthelement
{
    background: green;
    height: 100px;
    margin-left: -20px;
    margin-right: -20px;
}

＆＃13;

<div id="container">
    <div class="inner">
        <p>Blabla</p>
        <div class="fullwidthelement"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用填充

.outer-div {
    width: 200px;
    height: 200px;
    background: #000;
    margin: 0 auto;
    position: relative;
}
.inner-div {
    width: 100%;
    height: 150px;
    padding-right: 100px; /*extra width you want to add*/
    background: #f00;
    position: absolute;
    top: 20px;
}

<div class="outer-div">
    <div class="inner-div"></div>
</div>

Jsfiddle http://jsfiddle.net/0xdscqLo/2/