替代 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 以某种方式与 calc 一起正常工作？

Answer 1

首先重要的是要注意，您应该始终指定带有供应商前缀的属性 before the unprefixed properties :

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

第二个，如果你勾选canIuse（点击"show all"）你会看到safari 5.1不支持calc()功能。

Answer 2

为此使用填充

.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/

Answer 3

负利润率对您有用吗？

#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;
}

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

替代 calc()

Alternative to calc()

css

safari

css-calc