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
}

Mozilla 链接

或者您可以使用具有不同背景的嵌套 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;
}

注意顶部和底部的填充。

回到所有这些边界半径的东西之前，我们将不得不使用这种技术将圆角图像设置到容器中，以使其与内容保持流畅。现在事情容易多了。

小提琴