css - 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

首先，重要的是要注意，您应该始终在无前缀属性之前指定带有供应商前缀的属性：

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

其次，如果你检查canIuse（点击“显示全部”）你会看到safari 5.1不支持这个calc()功能。

Answer 2

负边距对你有用吗？

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

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/