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 link

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

注意顶部和底部的填充。

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

fiddle