限制水平滚动宽度仅与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; 
} 

通知顶部和底部的填充。

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

fiddle