隐藏水平滚动条

我的水平滚动条有问题。 我不想让它出现。实际上它只显示在 Chrome 中，而不会显示在 Internet Explorer 中。 我能做些什么？我尝试过修改 css 类中的宽度和填充，但这也会改变布局。测试中的内容是动态的，因此它可以垂直溢出，这很好，因为我只不需要水平滚动条。

HTML:

<div class="test">
    <table>
        <tr>
            <td>test</td>
        </tr>
    </table>
</div>

CSS:

.test {
    BORDER-TOP: #7F9DB9 1px solid;
    BORDER-RIGHT: #7F9DB9 1px solid;
    BORDER-LEFT: #7F9DB9 1px solid;
    BORDER-BOTTOM: #7F9DB9 1px solid;
    WIDTH: 100%;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 10px;
    PADDING-BOTTOM: 10px;
    PADDING-TOP: 10px;
    HEIGHT: 100%;
    BACKGROUND-COLOR: #ffffff
}

如果您需要的话，这是一个小提琴：http://jsfiddle.net/XLY9L/ http://jsfiddle.net/XLY9L/

Thanks

有一个简单的解决方案，只需将其添加到您的 CSS 声明中：

box-sizing: border-box;

出现水平滚动条的原因是，默认情况下，填充和边框会添加到您为元素指定的任何宽度。通过将其明确设置为border-box，内边距和边框包含在该宽度值中。

IE8+、FireFox 19+ 支持此属性（通过使用-moz-box-sizing）以及 iOS Safari 和 Android（通过使用-webkit-box-sizing)

另外，我强烈建议使用简写 css，如下所示：

.test {
    BOX-SIZING: border-box;
    WIDTH: 100%;
    HEIGHT: 100%;
    PADDING: 10px 0 10px 10px;
    BORDER: #7F9DB9 1px solid;
    BACKGROUND-COLOR: #ffffff;
}