1

自動幅と左右のマージンを持つコンテナがあります。

.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 でうまく動作させることはできますか?

4

3 に答える 3

3

まず、接頭辞なしのプロパティの前に、常にベンダー接頭辞付きのプロパティを指定する必要があることに注意することが重要です。

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

第 2に、 canIuse (「すべて表示」をクリック)をチェックすると、Safari 5.1 がこの機能をサポートしていないことがわかりcalc()ます。

于 2015-03-04T13:15:04.097 に答える
1

そのためにパディングを使用します

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

于 2015-03-04T13:15:30.493 に答える