隐藏水平滚动条

时间:2013-04-03 08:35:19

标签: html css scrollbars

我的水平滚动条有问题。 我不希望它出现。实际上它只显示在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/

由于

5 个答案:

答案 0 :(得分:8)

您可以尝试简单的方法

BODY {
    overflow-x:hidden;
}

答案 1 :(得分:7)

这是一个简单的解决方案,只需将其添加到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;
}

答案 2 :(得分:3)

除了@ micadelli的答案,您可以删除width: 100%,因为<div class="test">块级元素,并会自动填充它在当前占用的水平空间容器

答案 3 :(得分:3)

  

将此代码添加到CSS中。它将禁用水平滚动条。

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

答案 4 :(得分:0)

你也可以在你的网站上试试这个简单的css代码。只写overflow-x:hidden;在身体标签上。它会躲避你的身体。