jquery - CSS のみで水平スクロール幅を制限するためのクロスブラウザー ソリューション

Question

このためのCSSのみのクロスブラウザソリューションを作成しようとしていますが、jsなしでは管理できませんでした

https://dl.dropboxusercontent.com/u/604317/test/index.html

他に何か提案はありますか？

Answer 1

私はあなたが何を求めているか知っていると思います。

たとえば、最新のブラウザでは複数の背景を使用できます。

#container{
    background: transparent url('img') repeat-x top left, 
    background: transparent url('img') repeat-x bottom left,
    background: transparent url('img') repeat-y top right,
    background: transparent url('img') repeat-y top left
}

モジラ リンク

または、異なる背景を持つネストされた div の古い手法を使用できます。

<div class="top_bg">
    <div class="bottom_bg">
        <div class="right_bg">
            <div class="left_bg">
                <p>lorem</p>
            </div>
        </div>
    </div>
</div>

.top_bg{
    background: transparent url('img') repeat-x top left;
    padding: 10px 0 0;
}
.bottom_bg{
    background: transparent url('img') repeat-x bottom left;
    padding: 0 0 10px;
}
.right_bg{
    background: transparent url('img') repeat-y top right;
}
.left_bg{
    background: transparent url('img') repeat-y top left;
}

上下のパディングに注意してください。

このボーダー半径のすべての前に、この手法を使用して、角の丸い画像をコンテナーに設定し、コンテンツで流動的にする必要がありました。今では物事はずっと簡単です。

フィドル